vue动画详解

在我们开发中会往往遇到一些过渡效果 那么此时就会用到动画 于是呢就总结了以下 关于vue动画的使用方法

过渡类名 （动画基础）

<div id="example-1">
  <button @click="show = !show">
    Toggle render
  </button>
  <transition name="fade">
    <p v-if="show">hello</p>
  </transition>
</div>

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 { opacity: 0; }
.fade-enter-active { transition: opacity .5s; }
.fade-enter-to { opacity: 1; }
//离开过渡
.fade-leave { opacity: 1; }
.fade-leave-active { transition: opacity .5s; }
.fade-leave-to { opacity: 0; }

如何需要更炫酷的动画 可以使用 @keyframes

使用css动画库

通过自定义过度类名可以有效结合Animate.css这类动画库制作更精美的动画效果。

• 引入animate.css（两种方式）
  1.第一种方式 引入链接

<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet"
type="text/css">

2.npm
下载

npm install animate.css --save

引入

在main.js中引入
import animated from ‘animate.css’
Vue.use(animated)

用法

  <div v-if="nextStatus==false" ref="statusOne"
       <!--添加类名的方式-->
       class="animated rotateInDownRight">
      <div class="phone_number code_popup">
          <div class="phoneTitle">
              <span>+86</span>
          </div>
          <span>{{phoneNumber}}</span>
 </div>

• transition的设置

<transition enter-active-class="animated bounceIn"
leave-active-class="animated bounceOut">
</transition>

animate一些类名的详细解析

js动画钩子

可以再属性声明javaScript 钩子 使用JS实现动画

<transition
v-on:before-enter="beforeEnter" // 动画开始前，设置初始状态
v-on:enter="enter" // 执行动画
v-on:after-enter="afterEnter" // 动画结束，清理工作
v-on:enter-cancelled="enterCancelled" // 取消动画
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
></transition>

methods: {
beforeEnter(el) {
el.style.opacity = 0 // 设置初始状态
},
enter(el, done) {
document.body.offsetHeight; // 触发回流激活动画
el.style.opacity = 1 // 设置结束状态
}
},

也可以使用第三方插件 velocity来给dom添加动画 （https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js）

methods: {
beforeEnter(el) {
el.style.opacity = 0
},
enter(el, done) {
Velocity(el, { opacity: 1 }, { duration: 500, complete: done })
},
beforeLeave(el) {
el.style.opacity = 1
},
leave(el, done) {
Velocity(el, { opacity: 0 }, { duration: 500, complete: done })
}
},

列表动画

在实际开发中 难免会遇到给列表得每一个元素都添加动画得需求 那抹我们就要用到 transition-group 将列表包裹循环后就相当于给每一个元素外边都添加了一个transition 从而实现动画效果

<transition-group name="fade">
<div v-for="c in courses" :key="c.name">
{{ c.name }} - ￥{{c.price}}
<button @click="addToCart(c)">加购</button>
</div>
</transition-group>

列表过渡