谈谈Vue.js的过渡效果

有了Vue.js的过渡系统，在插入/移除DOM节点的过程中，可以轻松添加过渡动画效果。Vue会在适当的时候添加/删除CSS类名，触发CSS3的过渡/动画效果，你也可以提供相应的JavaScript钩子函数，在过渡的时候执行自定义的DOM操作。

以指令v-transition='my-transition '为例。当插入或移除带有该指令的DOM节点时，Vue将：

使用my-transition ID查找是否有注册的JavaScript钩子对象。这个对象可以通过Vue.transition(id，hooks)全局注册，或者通过transitions选项在当前组件中定义。如果找到这个对象，相应的钩子将在过渡动画的不同阶段被调用。

自动检测目标元素是否应用了CSS过渡效果或动画效果，并在适当的时候添加/删除CSS类名。

如果没有提供JavaScript钩子功能，也没有检测到相应的CSS过渡/动画效果，则在下一帧会立即执行DOM插入/移除。所有Vue.js的转换效果只有在DOM操作由vue.js触发的情况下才会生效，触发可以通过内置指令，比如v-if，也可以通过Vue实例的方法，比如vm。$ appendTo()。

典型的CSS过渡效果定义如下：

div v-if=' show ' v-transition=' expand ' hello/div

您还需要定义三个CSS类：展开-过渡，展开-输入和。展开-离开：expand-transition { transition : all . 3s ease；height: 30pxpadding: 10px背景色： # eee；飞越：隐藏；}.展开-输入，展开-离开{ height : 0；padding: 0 10pxopa city 3360 0；}同时，您还可以提供JavaScript钩子：

Vue.transition('expand '，{ before enter : function(El){ El . text content=' before enter ' }，enter : function(El){ El . text content=' enter ' }，After enter : function(El)}，enter canceled : function(El){//handle cancel }，` before leave : function(El){ El . text content=' before ' }，leave : function文字内容='离开后' }，离开取消了：功能(El){//句柄取消}})

这里使用的CSS类名是由v-transition指令的值决定的。以v-transition='fade '为例，CSS类。渐变会一直存在。淡入淡出。淡入淡出将在适当的时候自动添加或删除。当v-transition指令不提供值时，使用的CSS类名将是默认值。v型过渡，v-enter和。离开。

当show属性发生变化时，Vue会根据div元素的当前值插入/移除div元素，并在适当的时候添加/移除相应的CSS类，如下所示：

当显示变为假时，Vue将：

1.调用beforeLeave钩子；2.应用CSS类。v-在元素上保留以触发过渡效果；3.呼叫离开钩；4.等待过渡效果完成；(倾听过渡和事件)5。从DOM和CSS类中移除元素。离开。6.呼叫后离开钩。

当显示为真时，Vue将：

1.调用beforeEnter钩子；2.应用CSS类。v-输入元素；3.将元素插入DOM；4.调用enter钩子；5.应用。v-回车类，然后强制CSS布局确保。v-enter生效；最后，去掉。v-enter以触发元素转换到其原始状态。6.等待过渡效果完成；7.调用afterEnter钩子。

此外，如果正在执行输入的转换效果的元素在转换完成之前被移除，则将执行enterCancelled钩子。此挂钩可用于清洁工作，例如移除进入时创建的计时器。对于在离开过渡的过程中被重新插入的元素也是如此。

当上面提到的所有钩子函数被执行时，它们指向相应的Vue实例。如果一个元素本身是一个Vue实例的根节点，那么这个实例将被这样应用；否则，这将指向转换指令所属的实例。

最后，进入和离开钩子函数可以接受可选的第二个参数：回调函数。当您的函数签名包含第二个参数时，意味着您期望使用这个回调来显式完成整个转换过程，而不是依赖Vue来自动检测CSS转换的transitionend事件。例如：

输入：函数(el) {//没有第二个参数//过渡效果的结束由CSS过渡结束事件}VS决定

Enter:函数(el，done) {//有第二个参数//过渡效果的结束必须通过手动调用' done '来确定}当多个元素同时执行过渡效果时，Vue.js会进行批处理，确保强制布局只触发一次。

CSS动画CSS动画的调用方式与CSS转场效果相同。不同的是。动画中的v-enter类不会在节点插入DOM后立即移除，而是在animationend事件被触发时移除。

示例：(省略兼容性前缀)

span v-show=' show ' v-transition=' bounce '看着我！/span。弹跳进入{ animation:弹跳进入. 5s；}.弹开{ animation:弹开. 5s；} @关键帧弹入{ 0% { transform : scale(0)；} 50% { transform:比例尺(1.5)；} 100% { transform:比例尺(1)；} } @关键帧反弹{ 0% { transform : scale(1)；} 50% { transform:比例尺(1.5)；} 100% { transform:比例尺(0)；}}结果

纯JavaScript过渡效果。您也可以只使用JavaScript钩子，而不定义任何CSS转换规则。当只使用JavaScript钩子时，进入和离开钩子必须使用done回调，否则它们将被同步调用，转换将立即结束。在下面的例子中，我们使用jQuery注册一个自定义的JavaScript转换效果：

Vue。过渡(' fade '，{输入：函数(el，done){//此时，元素已经插入DOM //Call done回调$ (el)。CSS('不透明度'，0)。动画({不透明度： 1}，1000，完成)}，输入取消的：函数(El) {$ (El)。stop ()}，离开：函数(El，done){//与enter hook $(el)相同。animate({ opa city 3360 0 }，1000，done)}，leave取消了：函数(El) {$ (El)。stop ()}})，您可以通过为v-transition分配相应的ID来调用它：

p v-过渡='渐变'/p

如果一个只使用JavaScript转场效果的元素恰好受到其他CSS转场/动画规则的影响，可能会干扰Vue的CSS转场检测机制。在这种情况下，您可以通过向钩子对象添加css: false来禁用CSS检测。

渐变效果当同时使用v-transition和v-repeat时，我们可以给列表元素添加渐变效果。您只需要在过渡元素中添加堆叠器、输入-交错或离开-交错的特征(以毫秒为单位):

div v-重复='列表' v-过渡交错='100'/div

或者，您可以为更细粒度的控制提供交错、输入交错或输出交错钩子：

Vue。transition ('stager '，{ stager : function(index){//为每个transition元素添加50ms延迟，//但最大延迟为300ms。返回数学。最小值(300，索引* 50)}})示例：

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。