vue 组件transition

 

 

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

<script>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
</script>

 

 

 

 

 

 

      设置不同动画皆可以设置name属性进行区分。

 

 

 

 

 可以使用钩子函数来实现半场动画。动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象

 大家可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象

 beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式

 enter 表示动画 开始之后的样式

动画完成之后，会调用 afterEnter

 

引入animate.css结合transition

    <transition 
    enter-active-class="bounceIn" 
    leave-active-class="bounceOut" 
    :duration="{ enter: 200, leave: 400 }">
      <h3 v-if="flag" class="animated">这是一个H3</h3>     <!--加了基本类animated-->
    </transition> 

设置进入过程和离开过程的类，enter-active-class="bounceIn" ，leave-active-class="bounceOut" 。

 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 

bounceIn和bounceOut为animate.css中的类，作用的元素上要加一个基本类animated才能生效。

在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup。

 

 

参考来源于官方文档：https://cn.vuejs.org/v2/guide/transitions.html