elementUi built-transition animation (fade)

There are two elements fade elementUi way:

1.el-fade-in-linear  

2.el-fade-in

Instructions:

To use the tag at the outer fade in effect nested <transition> tag, and add the attribute name, attribute value el-fade-in-linear el-fade-in or

example:

 <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>