elementUi 元素淡入的方式有两种：
1.el-fade-in-linear
2.el-fade-in
使用方法：
在要使用该淡入效果的标签外层嵌套<transition>标签，并添加name属性，属性值为el-fade-in-linear 或 el-fade-in
例子：
<template>
<div>
<el-button type="primary" @click="fadeIn()">淡入</el-button>
<div class="ctn">
<!-- 在transition标签里添加对应的name -->
<!-- 淡入方式1：el-fade-in-linear -->
<transition name="el-fade-in-linear">
<div class="box" v-show="show">el-fade-in-linear</div>
</transition>
<!-- 淡入方式2：el-fade-in -->
<transition name="el-fade-in">
<div class="box" v-show="show">el-fade-in</div>
</transition>
</div>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
show: true
};
},
methods: {
fadeIn() {
this.show = !this.show;
}
}
};
</script>
<style lang="css" scoped>
.box {
display: inline-block;
width: 200px;
height: 200px;
background-color: skyblue;
margin-top: 20px;
color: #fff;
text-align: center;
line-height: 200px;
margin-right: 20px;
}
</style>