Vue — transition过渡动画
最后更新于：2022-04-02 08:06:50
看一下文档中key
[TOC]
>[success] # transition -- Vue的过渡动画
~~~
1.这里面的transition 是vue所属标签，所以是在vue中才可以使用
2.什么场景可以使用transition :
2.1条件渲染 (使用 v-if)
2.2条件展示 (使用 v-show)
2.3动态组件
2.4组件根节点
~~~
>[info] ## transition 使用
~~~
1.整个使用笔者自己将它分为三种，第一种是全程动画有去有回，第二种半程
动画，只去或者只回，第三种使用第三方动画库'Animate.css '
~~~
>[danger] ##### 第一种自定义全程动画
* 概念理解
~~~
1.解释下笔者说的全程动画，是整个动画有来有回，简单的理解，有一个按
钮控制了一个数据的显示和隐藏，当第一次点击这个按钮，让信息显示的时
候会执行一个显示的过场动画，第二次点击这个按钮，内容就会隐藏，但这
个隐藏动画起始展示位置会在你第一次显示位置的基础上执行。
2.简单的说动画是反复交替的，也就是整体构成会有两次，下面的案例会说
明上面的解释
~~~
* 使用方法
~~~
1.根据上面分析，可以勾勒出动画执行的时间效果图，最开始进入动画 进入
之前，'元素的起始状态' --- 》'入场动画的时间段'--》'离场动画的时间段' --》
'画离开之后，离开的终止状态'
2.下面官方的图可以更直观的说明
3.将官方规定的执行顺序class 做一个具体说明:
3.1 v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还
没有开始进入
3.2.v-enter-active 【入场动画的时间段】
3.3 v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，
此时，元素 动画已经结束了
3.4.v-leave-active 【离场动画的时间段】
~~~
* 案例
~~~
1.其实下面案例可以整合写在一起，由于防止整合写法让思维固化，认为不
能拆分单独定义每个阶段，下面案例采用的就是不是整合写法
2.下面的效果解释，当动画进入的时候从0-1整体0.6s显示，当第二次点击，
隐藏的时候接着上次从1-0 整体用时1s
3.整合写法：
.v-enter-active,
.v-leave-active{
transition: all 1s ease;
}
.v-leave-to {
opacity: 0;
}
~~~
~~~
Title
~~~
>[danger] ##### 第二种半程动画
~~~
1.有时候执行动画的时候，只想执行半程，举个例子，当下订单购物的时
候，点击商品好多时候，商品会有一个动画效果进入购物车，如果 这种，
采用了全程动画，第二次点击的时候小球就会从购物车出来，但其实这不是
我们想要的，我们想要的不管第几次点击小球都是从商品到购物车。
2.半程动画也就可以实现调用一些第三方动画效果的js，让实现通过js调用，
实现全程动画，因为半程动画是在方法中写的而不是css中。
~~~
* 使用方法(JavaScript 钩子)
~~~
1.首先半程动画都是函数，因此v-on绑定指定的钩子事件，执行自己定义的
事件方法。
2.使用写法:
3.参数介绍:
methods: {
// 注意beforeEnter参数el是绑定对象的dom
// 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设 置元素开始动画之前的起始样式
beforeEnter: function (el) {
},
// enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
// 这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
//el.offsetWidth 会强制动画刷新,没有实际的作用，但是，如果不写，出不来动画效果；
enter: function (el, done) {
el.offsetWidth
done()
},
//控制小球的显示与隐藏
afterEnter: function (el) {
// ...
},
beforeLeave/leave/afterLeave 和上面类似只不过这里相当于往返动画的第
二阶段
~~~
* 特别解释下执行顺序
~~~
1.首先beforeEnter 中的el参数来规定dom初始画的位置颜色等基础值，
enter 中的el参数来规定动画的效果值，done参数来调用afterEnter，而
afterEnter 函数用了执行控制显示隐藏的data值变化。主要的功能第二次点
击按钮的时候，实际是吧在enter执行done时候的数值再次变回初始值
~~~
~~~
Title
~~~
>[danger] ##### 第三种使用第三方样式包animate.css
~~~
1. 去官网找对应的animate动画效果即可
~~~
~~~
我是那段被执行的往返动画