使用vue来做一些小巧的动画效果是非常方便的,今天本人想使用vue的过渡来完成一个滑动过渡效果,这里和大家分享一下。
直接上源代码:
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Vue滑动效果& lt;/title>
& lt; style>
.d {
位置:绝对的;
边界:1 px固体红;
宽度:30 px;
高度:30 px;
}
@keyframes显示{
0% {
透明度:0;
左:32像素;
}
100% {
透明度:1;
左:0;
}
}
@keyframes隐藏{
0% {
透明度:1;
左:0;
}
100% {
透明度:0;
左:-32 px;
}
}
.show-enter-active {
动画:显示1.2秒;
}
.show-leave-active {
动画:隐藏1.2秒;
}
.show-enter .show-leave-to {
透明度:0;
}
.wrap {
位置:相对;
宽度:32像素;
高度:32像素;
}
& lt;/style>
& lt;脚本src=" https://cdn.bootcss.com/vue/2.4.2/vue.min.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div id=坝τ谩北?
& lt; p>{{消息}}& lt;/p>
& lt; div类="包装"比;
& lt;过渡name=靶恪痹?
& lt; div类=" d " v=跋钅苛斜怼?关键="项目。id“v="===item.id”比;
{{项目。文本}}
& lt;/div>
& lt;/transition>
& lt;/div>
& lt;按钮@click="添加"祝辞add
& lt;/div>
& lt; script>
新Vue ({
埃尔:“#应用”,
数据(){
返回{
信息:“你好Vue.js !”
数:0,
列表:(
{id: 0,文本:“aaa”},
{id: 1、文本:“bbb”},
{id: 2、文本:“ccc”}
]
}
}，
方法:{
添加:函数(){
如果这一点。数& lt;this.list。长度- 1){
这一点。数+=1;
其他}{
这一点。数=0;
}
}
}
}）
& lt;/script>
& lt;/body>
& lt;/html>
之前
这里需要注意的是父级使用相对的,子级使用绝对进行定位,利用左值来进行位置的控制移动。这里如果使用变换的话,由于之前的div有一个渐变的消失过程,这个过程中他的位置一直有存在,造成了后面的div无法正确移动到对应位置,所以使用绝对更好。
实在不行可以使用过渡的模式属性,设置成战斗,先让前者完成动画,让占据的位置完全消失,使得下一个div可以正常运动,不过这种方式只能先后完成动画,不能同时完成动画。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
