Vue单元素/组件进入/离开过渡

<template>
  <div class="page">
    <h1>单元素/组件过渡</h1>
    <!--为.box元素添加进入/离开过渡-->
    <transition name="fade" v-for="item in items">
      <div class="box" v-if="item.isShow" @click="item.isShow=!item.isShow">{{item.txt}}</div>
      <!--
      注意：transition的过渡效果只对第一层元素生效
      transition的name属性和css的前缀相对应，必须保持一致才能生效
      transition还要配合css一起使用才能生效
      -->
    </transition>
    <!--
    把需要添加过渡的元素放到transiton组件中
    -->
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        items: [
          {txt: 'h', isShow: true},
          {txt: 'e', isShow: true},
          {txt: 'l', isShow: true},
          {txt: 'l', isShow: true},
          {txt: 'o', isShow: true}
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .page {
    display: flex;
  }

  .box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: bold;
    width: 100px;
    height: 100px;
    background-color: #eee;
    margin: 0 30px;
  }

  /*
  过渡的类名
  如果transition元素没有name属性，则css元素默认前缀是 v-
  */
  .fade-leave-active {
    transition-property: opacity, transform;
    transition-duration: 0.5s, 0.5s;
  }
  .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: scale(1.3);
  }
</style>