elementUi内置过渡动画（淡入）

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>

elementUi内置过渡动画（淡入）

推荐阅读