Vue中的动画

Vue 中的动画

• 使用过渡类名实现动画

  • 使用 transition 元素，把需要被动画控制的元素，包裹起来
    • transition 元素，是 vue 官方提供的

    <transition>
    	<h3 v-if="flag">这是一个h3</h3>
    </transition>
    

  • 自定义两组样式，来控制 transition 内部的元素实现动画
    • v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有进入
    • v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素动画已经结束了

        .v-enter,
        .v-leave-to{
            opacity:0;
            transform: translateX(200px);
        }
      

    • v-enter-active 【入场动画的时间段】
    • v-leave-active 【离场动画的时间段】

        .v-enter-active,
        .v-leave-active{
            transition: all 0.8s ease;
        }
      

  • v- 前缀是区分动画的

        .my-enter,
        .my-leave-to{
            opacity:0;
            transform: translateY(200px);
        }
        .my-enter-active,
        .my-leave-active{
            transition: all 0.8s ease;
        }
        
   	  <transition name="my">
            <h6 v-if="flag2">这是一个h6</h6>
        </transition>
  

• JavaScript 钩子