vue 动画

一、过渡动画

代码示例：

<template>
  <div>
    <transition name="fade">
      <div>
        some code...
      </div>
    </transition>
  </div>
</template>

<style lang="scss" scoped>
  .fade-enter,.fade-leave-to{
    opacity: 0;
  }
  .fade-enter-active,.fade-leave-active{
    transition: opacity 1.5s;
  }
</style>

过渡动画图例：

1. v-enter ：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

.fade-enter { opacity: 0; }

2. v-enter-active ：定义进入过渡生效时的状态。在元素被插入之前生效，在过渡/动画完成之后移除。

.fade-enter-active { transition: opacity .5s; }

3. v-enter-to : 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

.fade-enter-to { opacity: 1; }

4. v-leave : 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

.fade-leave { opacity: 1; }

5. v-leave-active ：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

.fade-leave-active { transition: opacity .5s; }

6. v-leave-to : 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

.fade-leave-to { opacity: 0; }

二、css动画库

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

1、animate.css引入

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

2、transition设置

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

三、js钩子

可以在transition属性中声明 JavaScript 钩子，使用JS实现动画。

方案1：

1、transition上加钩子函数

<transition @before-enter="beforeEnter" @enter="enter"> ... </transition>

2、methods里面js实现动画和浏览器重排--重新计算和渲染（不仅仅是重绘）

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

方案2：

1、cdn引入

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"> </script>

或者：

安装:

npm install velocity-animate@beta

页面引入：

import  Velocity from 'velocity-animate'

2、transition上加钩子函数 && methods里面js实现动画和浏览器重排--重新计算和渲染（不仅仅是重绘）

<transition 
    name="fade" 
    :css="false" // 禁用css 
    @before-enter="beforeEnter" 
    @enter="enter" 
    @before-leave="beforeLeave" 
    @leave="leave">
</transition>

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 
	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>

四、列表过渡

利用transition-group可以对v-for渲染的每个元素应用过度

范例：给列表添加增加过度

1、ul 里的 li 套上transition-group 加上name="fade"

<transition-group name="fade">
    <div v-for="c in courses" :key="c.name">
        {{ c.name }} - ￥{{c.price}} 
    </div>
</transition-group>

2、css加动画效果

.fade-enter,.fade-leave-to{
    opacity: 0;
}
.fade-enter-active,.fade-leave-active{
    transition: opacity 1.5s;
}