Vue ＜transition＞ 通过动态name属性实现动态过渡案例

 

 

<!-- Vue <transition> 通过动态name属性实现动态过渡案例 -->
<template>
  <div class="page">

    <p>
      <button @click="switchTransName">switch transitionName</button>
    </p>

    <transition :name="tranName">
      <div v-if="show" class="box">hello</div>
    </transition>

  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        tranName: 'tran',
        show: true,
      }
    },
    mounted() {
      this.setIntervalAni();
    },
    methods: {
      setIntervalAni() {
        let vm = this;
        setInterval(function () {
          vm.show = !vm.show;
        }, 1000)
      },
      switchTransName() {
        this.tranName === 'fade' ? this.tranName = 'tran' : this.tranName = 'fade';
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  .box {
    width: 100px;
    text-align: center;
  }

  // fade
  .fade-enter {
    opacity: 0;
  }

  .fade-enter-active, .fade-leave-active {
    transition: all 0.5s;
  }

  .fade-leave-to {
    opacity: 0;
  }

  // transform
  .tran-enter {
    // 关于transform scale可参考：https://www.cnblogs.com/yanggeng/p/11277199.html
    // transform: scaleX(3) scaleY(3);  =  transform: scale(3, 3);
    transform: scale(3, 3);
  }
  
  .tran-enter-active, .tran-leave-active {
    transform-origin: center;
    transition: all 1s;
  }

  .tran-leave-to {
    transform: scale(0, 0);
  }
</style>