本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现。
列表过渡
目前为止,关于过渡我们已经讲到:
那么怎么同时渲染整个列表,比如使用 v-for
?在这种场景中,使用
组件。在我们深入例子之前,先了解关于这个组件的几个特点:
现在让我们由一个简单的例子深入,进入和离开的过渡使用之前一样的 CSS 类名。
本文将介绍Vue中的列表过渡,动态过渡, 以及可复用过渡是实现。
目前为止,关于过渡我们已经讲到:
那么怎么同时渲染整个列表,比如使用 v-for
?在这种场景中,使用
组件。在我们深入例子之前,先了解关于这个组件的几个特点:
现在让我们由一个简单的例子深入,进入和离开的过渡使用之前一样的 CSS 类名。
运行结果:
这个例子有个问题,当添加和移除元素的时候,周围的元素会瞬间移动到他们的新布局的位置,而不是平滑的过渡,我们下面会解决这个问题。
组件还有一个特殊之处。不仅可以进入和离开动画,还可以改变定位。要使用这个新功能只需了解新增的v-move
特性,它会在元素的改变定位的过程中应用。像之前的类名一样,可以通过 name
属性来自定义前缀,也可以通过 move-class
属性手动设置。
v-move
对于设置过渡的切换时机和过渡曲线非常有用,你会看到如下的例子:
这个例子需要添加以下引用
运行结果:
这个看起来很神奇,内部的实现,Vue 使用了一个叫 FLIP 简单的动画队列
使用 transforms 将元素从之前的位置平滑过渡新的位置。
我们将之前实现的例子和这个技术结合,使我们列表的一切变动都会有动画过渡。
运行结果:
通过 data 属性与 JavaScript 通信 ,就可以实现列表的渐进过渡:
运行结果如下:
过渡可以通过 Vue 的组件系统实现复用。要创建一个可复用过渡组件,你需要做的就是将
下面的例子是将上一个列表渐进过渡的例子改为可复用的过渡的源码:
var app5 = new Vue({
el:'#app5',})
效果与上一个例子一致:
但是函数组件更适合完成这个任务。由于暂时还没有学到render函数,所以暂时先不实现render函数组件。后面学到的时候再做打算。
在 Vue 中即使是过渡也是数据驱动的!动态过渡最基本的例子是通过 name 特性来绑定动态值。
当你想用 Vue 的过渡系统来定义的 CSS 过渡/动画 在不同过渡间切换会非常有用。
所有的过渡特性都是动态绑定。它不仅是简单的特性,通过事件的钩子函数方法,可以在获取到相应上下文数据。这意味着,可以根据组件的状态通过 JavaScript 过渡设置不同的过渡效果。
运行结果:
其中例子里的mounted是在Vue挂载完成,也就是模板中的html渲染到html页面中时的一个钩子函数,只会执行一次。具体内容可以理解下Vue的生命周期,这里就不赘述了。
但是如果这里不使用mounted的话,也是可以用初始渲染来实现,只不过比较麻烦。实现的方法是:
在transition中加入appear钩子函数:@appear="appear",然后在vue实例的methods中添加appear方法: