D - Vue 过渡动画 - 笔记

//未完工~

提前

笔记不适合初始学习,主要用来快速恢复之前忘记的知识

如果您已经会了css的过渡属性transition和贝塞尔曲线,可以跳过提前
如果您忘的差不多了或不知道,可以看下一下这个 CSS 贝塞尔曲线 和 过渡属性transition

资源

Velocity.js

<script src="https://cdn.jsdelivr.net/npm/velocity-animate@1.5.0/velocity.min.js"></script>

官方文档

http://velocityjs.org/

Vue过渡`

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果

Vue 提供了transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
 条件渲染 (使用 v-if)
 条件展示 (使用 v-show)
 动态组件
 组件根节点

当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：
 自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
 如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
 如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行。(注意：此指浏览器逐帧动画机制，和 Vue 的 nextTick 概念不同)

如果没有声明class,那么过渡类顺序无所谓
如果声明了class,那么 想要应用CSS属性,必须把过渡类放在class的后面,不然应用过渡类后会被原本的类覆盖
例如:

<style>
	.v-enter{
		color:green;	/*不会被应用,除非.a里没有设置color属性*/
	}
	.a{
		color:red;
	}
	.v-enter{
		color:green;	/*它会覆盖.a的color*/
	}
</style>
<transition>
	<div class="a"></div>
</transition>

transition内置组件

Props(道具)

name : String

用于自动生成 CSS 过渡类名。例如：name: ‘fade’ 将自动拓展为 .fade-enter，.fade-enter-active 等。默认类名为 “v”

enter-class
enter-active-class
enter-to-class
leave-class
leave-active-class
leave-to-class
: String

他们的优先级高于普通的类名，这对于 Vue 的过渡系统和其他第三方 CSS 动画库，如 Animate.css 结合使用十分有用
如果声明了enter-class,就不会在自动插入.v-enter,其它也一样
和下面的过渡类名一个道理

appear : Boolean

是否在初始渲染时使用过渡,默认为 false ,也就是一进入网页,就开始进入过渡,默认使用:进入过渡类和进入过渡事件
建议使用事件就不要使用class,处理起来很麻烦的!

<Transition appear></Transition>  <!--快捷应用,不用:appear='true'-->

appear-class
appear-active-class
appear-to-class
:String

初始过渡,替换掉默认使用的进入过渡类

type : String

指定过渡事件类型，侦听过渡何时结束。有效值为 transition 和 animation ,默认 Vue.js 将自动检测出持续时间长的为过渡事件类型

duration : Number , { enter: Number, leave: Number }

单位:ms
指定过渡类名的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件
它并不能代表过渡属性,只是设置了过渡类名的持续时间,时间到被移除

css : Boolean

是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子,不会在添加class
直接css='false'是不行的,false会被识别为字符串,必须 :css='false'

mode : String

控制离开/进入过渡的时间序列 , 有效的模式有 out-in 和 in-out ；默认同时进行
in-out : 新元素先进行过渡，完成之后当前元素过渡离开
out-in : 当前元素先进行过渡，完成之后新元素过渡进入
它有一个专业术语叫过渡模式

事件

自动在对应的时机触发
enter 进入
before-enter 进入前
after-enter 进入后
enter-cancelled 进入取消(打断)

leave 离开
before-leave 离开前
after-leave 离开后
leave-cancelled 离开取消(打断) (只用于 v-show 中)

appear 初始
before-appear 初始前
after-appear 初始后
appear-cancelled 初始取消(打断)

事件中函数的第一个参数是 过渡元素的实例 ,我不清楚是不是的,反正可以这样用:

el.style.width='200px';

第二个参数是个函数,我们命名为done,只有enter和leave和appear有,其他事件使用会报错
主要用来告诉Vue,过渡执行完了,之后会去触发 after-enter ,after-leave ,after-appear,对应的触发对应的
触发流程是这样的:
 进入前 -> 进入(运行done()) -> 进入后 -> 没了
 进入前 -> 进入(不运行done()) -> 没了
过渡未完成 或 没运行done(),在切换进入/离开,就会触发 打断事件

注意事项

使用钩子,是真实修改,不像class,可以自动插入和移除,所以要手动还原,自由度高,虽然麻烦,不过我挺喜欢的

使用appear这些事件,不需要声明appear道具(属性)

大坑!在写enter函数的时候一定要用延时函数(不知道为什么),不然没过渡效果,这玩意耗了我2个小时,录制时完全是一瞬间变成最后样式,可以自己去录制看看,我说的不是用软件录制,是f12->性能->录制

enter:function (el,done) {
	setTimeout(()=>{
		//修改属性的代码...
		done();
	},0)	//0都可以,但是不能没有,求大佬解答
}

大坑在写leave函数的时候,执行done()一定要延时,不然元素立马就被移除了,因为done()会移除元素
例如:

leave:function (el,done) {
	//修改属性的代码...
	setTimeout(()=>{
		done();
	},延时时间)	//和过渡时间保持一致,才有最佳的感觉
}

当有相同标签名的元素切换时，需要通过 key 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition>组件中的多个元素设置key 是一个更好的实践

transition-group内置组件

主要用来对v-for

Props(道具)

tag : string

默认为 <span> ,<transition-group>将会被替换成对应的tag元素,属性还在和,is道具很像

move-class : String

覆盖移动过渡期间应用的 CSS 类
用class也行.v-move
当元素需要改变位置时,不突然改变,有个过渡
比如有 删除或插入或排序 ,之前的元素需要改变位置,就会有个过渡

除了 mode，其他 props 和 <transition> 相同

事件

与<transition> 相同

注意事项

内部元素总是需要提供唯一的 key 值

CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身

需要注意的是使用 FLIP过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

过渡类名

在进入/离开的过渡中，会有 6 个 class 切换
.v-enter：定义进入过渡的开始状态,在元素被插入之前生效，在元素被插入之后的下一帧移除

.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

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

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

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

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

过渡自始至终还是会回复到原样式

过渡只是因为元素发生了改变,让元素变化的别那么突然

上面说了,既然是改变,那么我们回头看看.v-enter和.v-enter-to的描述,一个是插入之前,一个是插入之后,所以插入后的改变才叫改变

由于.v-enter-active和.v-enter-to是一起被移除,所以.v-enter-to样式到原样式没有过渡(是瞬间的),除非像下面的特殊过渡一样

进入过渡.v-enter 到 过渡结束 .v-enter-to,是一个变换的过程.v-enter-active,若没有设置它们就会按照原样式来过渡
离开过渡也是一样的

小疑惑

过渡属性定义在非Vue类

下面的代码是这样过渡的:
进入过渡 背景是#000 5s后 背景变为red,此时Vue的过渡结束了,随后.v-enter-to被移除了,但过渡属性设置在.a上,所以还得从red 慢慢(5s)恢复成原样式 deepskyblue ,总共花费 10s

所以尽量不要把过渡属性定义到其他类里,定义到.v-enter-active就可以了,除非你想要这个效果

	<style>
		.a{
			background-color: deepskyblue;
			width: 100px;
			height: 100px;			
			transition:  5s;	
		}
		.v-enter{

			background-color: #000;
		}
		.v-enter-to{
			background-color: red;
		}	
	</style>

废物.v-leave ?

网上说这是Vue作者的回答:

https://github.com/vuejs/vue/issues/3580

由于对称性和逻辑完整性，这与其他已弃用的 API 不同 - 您不会因为几乎不使用它而切断肢体

好像就是很单纯的想保留它,虽然他没有用
.v-leave生效后,下一帧就被移除了,一瞬间,你眼睛都看不过来

一般都不会用到.v-leave和.v-enter-to

为什么.v-enter不是废物 ?

首先.v-enter是在元素未插入时,就已经生效了

在那一瞬间,元素被插入了,插入时.v-enter就存在,下一帧.v-enter-to被插入了,随后.v-enter被移除,这都是同一帧完成的,又下一帧.v-enter-to生效了,元素发生改变,开始过渡,过渡结束后,.v-enter-to被移除,元素发生改变,由于没有过渡了,所以一瞬间变回原样式

如果不用.v-enter-to

在那一瞬间,元素被插入了,插入时.v-enter就存在,下一帧.v-enter被移除,又下一帧变回原样式,开始过渡

动画

以后补充,这个和过渡差不多