Vue 中的动画特效(一)

Vue中的CSS动画原理

Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡, transition 的 name 可以替换过度的类名

过渡的类名

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}

<transition name="fade">
  <div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>

var vm = new Vue({
  el: '#root',
  data: {
    show: true
  },
  methods: {
    handleClick: function() {
      this.show = !this.show;
    }
  }
})

Vue中的animate.css库

我们可以自己定义一个动画方式，并给他们定义名字

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}
.active{
  transform-origin: left center; 
  animation: bounce-in 1s;
}

.leave {
  transform-origin: left center;
  animation: bounce-in 1s reverse;
}

<transition name="fade"
            enter-active-class="active"
            leave-active-class="leave">
  <div v-if="show">hello world</div>
</transition>

虽然这个动画很不错，但是很多时候我们通过调用第三方的库来完成我们需要的效果，animate.css 就是一个非常不错的第三方动画库了，通过一些简单的调用，就可以很多酷炫的效果

 <transition name="fade"
             enter-active-class="animated swing"
             leave-active-class="animated shake">
  <div v-if="show">hello world</div>
</transition>

Vue中同时使用过渡和动画

通过给 transition 设置 appear 和 appear-active-class 就可以实现第一次进场时使用动画，通过给 enter-active-class 和 leave-active-class 设置 fade-enter-active 和 fade-leave-active 就可以实现同时使用过渡和动画。有些时候动画和过渡的时间不一样，可以通过 type=“transition” 以transition 时间为准，也可以使用 :duration="{enter: 5000, leave: 10000}" 来控制时间总长

<transition
  :duration="{enter: 5000, leave: 10000}"
  name="fade"
  appear
  enter-active-class="animated swing fade-enter-active"
  leave-active-class="animated shake fade-leave-active"
  appear-active-class="animated swing">
  <div v-if="show">hello world</div>
</transition>