CSS transition

  1. <div id="demo">
  2.     <button v-on:click="visible = !visible">Toggle</button>
  3.   <!-- 第一步，先写transition动画，name=fade表示css中的动画选择器要以fade开头 -->
  4.     <transition name="fade">
  5.       <p v-if="visible">hello</p>  
  6.   </transition>
  7. </div>
  1. /*以fade开头*/
  2. .fade-enter-active,.fade-leave-active{
  3.     transition: all 3s;
  4. }
  5. .fade-enter,.fade-leave-to{
  6.     opacity:0;
  7.   width:100px;
  8. }
  9. p{
  10.     border:1px solid red;
  11.   width:300px;
  12. }
  1. new Vue({
  2.     el:'demo',
  3.     data:{
  4.         visible:true
  5.     }
  6. })

v-enter 第一帧的样式，也就是进入过渡的开始状态，
v-enter-active 动画中，正在进入状态
v-enter-to 第二帧，进入过渡的结束状态

动画过程细节，首先v-enter 和 v-enter-active出现。然后变成v-enter-to 和 v-enter-active在，最后这两个都被删掉了。

CSS animation

  1. <div id="example-2">
  2.   <button @click="show = !show">Toggle show</button>
  3.   <transition name="bounce">
  4.     <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
  5.   </transition>
  6. </div>
  1. .bounce-enter-active {
  2.   animation: bounce-in .5s;
  3. }
  4. .bounce-leave-active {
  5.   animation: bounce-in .5s reverse;
  6. }
  7. @keyframes bounce-in {
  8.   0% {
  9.     transform: scale(0);
  10.   }
  11.   50% {
  12.     transform: scale(1.5); /*先变大*/
  13.   }
  14.   100% {
  15.     transform: scale(1); //再缩回正常状态
  16.   }
  17. }
  1. new Vue({
  2.   el: '#example-2',
  3.   data: {
  4.     show: true
  5.   }
  6. })

JS操作动画

javascript钩子

  1. <transition
  2.   v-on:before-enter="beforeEnter"
  3.   v-on:enter="enter"
  4.   v-on:after-enter="afterEnter"
  5.   v-on:enter-cancelled="enterCancelled"
  7.   v-on:before-leave="beforeLeave"
  8.   v-on:leave="leave"
  9.   v-on:after-leave="afterLeave"
  10.   v-on:leave-cancelled="leaveCancelled"
  11. >
  12.   <!-- ... -->
  13. </transition>
  1. // ...
  2. methods: {
  3.   // --------
  4.   // 进入中
  5.   // --------
  7.   beforeEnter: function (el) {
  8.     // ...
  9.   },
  10.   // 当与 CSS 结合使用时
  11.   // 回调函数 done 是可选的
  12.   enter: function (el, done) {
  13.     // ...
  14.     done()
  15.   },
  16.   afterEnter: function (el) {
  17.     // ...
  18.   },
  19.   enterCancelled: function (el) {
  20.     // ...
  21.   },
  23.   // --------
  24.   // 离开时
  25.   // --------
  27.   beforeLeave: function (el) {
  28.     // ...
  29.   },
  30.   // 当与 CSS 结合使用时
  31.   // 回调函数 done 是可选的
  32.   leave: function (el, done) {
  33.     // ...
  34.     done()
  35.   },
  36.   afterLeave: function (el) {
  37.     // ...
  38.   },
  39.   // leaveCancelled 只用于 v-show 中
  40.   leaveCancelled: function (el) {
  41.     // ...
  42.   }
  43. }

velocity是一个用js做动画的库

多元素动画

  1. <transition mode="out-in"> //out-in可以让两个动画，一个先淡出完成，另一个再淡入
  2.   <button v-if="isEditing" key="save"> //要加key，不然vue识别不了这两个button的区别
  3.     Save
  4.   </button>
  5.   <button v-else key="edit"> //要加key，不然vue识别不了这两个button的区别
  6.     Edit
  7.   </button>
  8. </transition>

多个组件过渡

  1. <transition name="component-fade" mode="out-in">
  2.   <component v-bind:is="view"></component>
  3. </transition>
  1. .component-fade-enter-active, .component-fade-leave-active {
  2.   transition: opacity .3s ease;
  3. }
  4. .component-fade-enter, .component-fade-leave-to
  5. /* .component-fade-leave-active for below version 2.1.8 */ {
  6.   opacity: 0;
  7. }
  1. new Vue({
  2.   el: '#transition-components-demo',
  3.   data: {
  4.     view: 'v-a'
  5.   },
  6.   components: {
  7.     'v-a': {
  8.       template: '<div>Component A</div>'
  9.     },
  10.     'v-b': {
  11.       template: '<div>Component B</div>'
  12.     }
  13.   }
  14. })

列表动画

transition-group组件，会在html中以一个默认span标签来渲染，用tag可以自定义标签。mode=”out-in”不能用了。注意内部元素需要key。

  1. <div id="list-demo" class="demo">
  2.   <button v-on:click="add">Add</button>
  3.   <button v-on:click="remove">Remove</button>
  4.   <transition-group name="list" tag="p"> //tag="p"表示带有for循环的span外面自动套一个p标签
  5.     <span v-for="item in items" v-bind:key="item" class="list-item">
  6.       {{ item }}
  7.     </span>
  8.   </transition-group>
  9. </div>
  1. .list-item {
  2.   display: inline-block;
  3.   margin-right: 10px;
  4. }
  5. .list-enter-active, .list-leave-active {
  6.   transition: all 1s;
  7. }
  8. .list-enter, .list-leave-to
  9. /* .list-leave-active for below version 2.1.8 */ {
  10.   opacity: 0;
  11.   transform: translateY(30px);
  12. }
  1. new Vue({
  2.   el: '#list-demo',
  3.   data: {
  4.     items: [1,2,3,4,5,6,7,8,9],
  5.     nextNum: 10
  6.   },
  7.   methods: {
  8.     randomIndex: function () {
  9.       return Math.floor(Math.random() * this.items.length)
  10.     },
  11.     add: function () {
  12.       this.items.splice(this.randomIndex(), 0, this.nextNum++)
  13.     },
  14.     remove: function () {
  15.       this.items.splice(this.randomIndex(), 1)
  16.     },
  17.   }
  18. })

资料来源：饥人谷