Vue之transition

Vue的transition实现动画效果

Vue 提供了 transition 的封装组件，可以给任何元素和组件添加进入/离开过渡；
在进入/离开的过渡中，会有 6 个 class 切换；
v-enter 、v-enter-active 、v-enter-to 、v-leave 、v-leave-active 、v-leave-to。

image.png

示例：

    
        
            hello

    .slide-enter-active, .slide-leave-active {
        transition: all .3s;
    }
    .slide-enter, .slide-leave-to {
        margin-left: -200px;
    }

vue动画transiton的多种用法：

1. transition

  
    hello

要先设置好对应的样式属性才能有对应的变化

.fade-enter-active, .fade-leave-active {
  transition: all 3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
  width:100px;
}
p{
  border:1px solid red;
  width:300px;
}

2. 还可以配合animation实现动画+@keyframes


  
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.

.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}

3. animate.css 库

先引入animate.css库
https://daneden.github.io/animate.css/
可以设置不同动画单词出现不同动画效果

  
    hello

4. JavaScript钩子

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

5. Velocity.js

可以使用Velocity.js 需要先引用哦

  methods: {
    beforeEnter: function (el) {
      el.style.opacity = 0
      el.style.transformOrigin = 'left'
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
      Velocity(el, { fontSize: '1em' }, { complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
      Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
      Velocity(el, {
        rotateZ: '45deg',
        translateY: '30px',
        translateX: '30px',
        opacity: 0
      }, { complete: done })
    }
  }

6. 多个元素的过渡

.fade-enter-active, .fade-leave-active {
  transition: all 1s;
}
.fade-enter {
  opacity: 0;
  transform: translateX(50px);
}
.fade-leave-to {
  opacity: 0;
  transform: translateX(-50px);
}

#example-2{
  position: relative;
  padding: 100px;
}
#example-2 button {
  position: absolute;
}

这种思路就可以做出轮播的效果了。
本人就这种思路写了一个轮播组件。
源码和使用文档

7. 多个组件的过渡

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: 'Component A'
    },
    'v-b': {
      template: 'Component B'
    }
  }
})

.component-fade-enter-active, .component-fade-leave-active {
  transition: opacity .3s ease;
}
.component-fade-enter, .component-fade-leave-to
/* .component-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}

这样写就可以做tabs了

8. for循环怎么动画（列表的进入/离开过渡）

  
    
      {{ item }}

要点：标签transition-group、设置一个tag标签、紧跟一个for循环
注意，每个的子节点必须有独立的 key，动画才能正常工作。

--参考来自Vue官方文档：过渡 & 动画