Vue知识小课堂第二课——vue与Velocity实现过渡和动画

✍上期回顾

第一课之监听窗口滑动事件以及某具体元素内部监听滑动

Velocity介绍

Velocity.js插件的作用

Velocity.js是一个简单易用，高性能且功能丰富的轻量级JavaScript动画库，它拥有颜色动画，转换动画（transforms）、循环、缓动、SVG动画、和滚动动画等特色功能
支持Chaining链式动画，当一个元素连续应用多个velocity()时，动画以队列的方式执行

案例演示：
第一步安装:

npm install velocity-animate@beta

第二步页面引入：

import  Velocity from 'velocity-animate'

第三步使用代码：

<template>
  <div id="a">
      <button @click="show=!show">动画效果</button>
      <transition @before-enter="beforeEnter" @enter="enter" @leave="leave" :css="false">
        <p v-show="show">文字动画效果</p>
      </transition>
  </div>
</template>

<script>
  import  Velocity from 'velocity-animate'

export default {
  name: 'App',
  data(){
    return{
      show:false
    }
  },
  methods:{
    beforeEnter(el){
        el.style.apacity= 0 //透明度
        el.style.transformOrigin='left'//设置旋转元素的基点位置
        el.style.color='red'//颜色
    },
    enter(el,done){
        Velocity(el,{opacity:1,fontSize:'1.4em'})
        Velocity(el,{fontSize: '1em'},{complete:done})
    },
    leave(el,done){
        Velocity(el,{translateX:'15px',rotateZ:'50deg'},{duration:300})
        Velocity(el,{rotateZ:'100deg'},{loop:2},{duration: 300})
        Velocity(el,{rotateZ:'45deg',translateY:'30px',translateX: '30px',opacity: 0 },{complete: done})
    }
  }
}
</script>

<style>

</style>

运行结果自行测试哦

🔥 明天的内容：精讲Web前端Vue动画