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>