欢迎访问 生活随笔！
TAG聚合

生活随笔

当前位置： 首页 > 前端技术 > vue >内容正文

vue

使用vue的transition完成滑动过渡

发布时间：2025/3/18 vue 35 豆豆
生活随笔 收集整理的这篇文章主要介绍了 使用vue的transition完成滑动过渡 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

使用vue来做一些小巧的动画效果是非常方便的，今天本人想使用vue的transition来完成一个滑动过渡效果，这里和大家分享一下。

直接上源代码：

<!DOCTYPE html> <html> <head><meta charset="utf-8"><title>Vue滑动效果</title><style>.d {position: absolute;border: 1px solid red;width: 30px;height: 30px;}@keyframes show {0% {opacity: 0;left: 32px;}100% {opacity: 1;left: 0;}}@keyframes hide {0% {opacity: 1;left: 0;}100% {opacity: 0;left: -32px;}}.show-enter-active {animation: show 1.2s;}.show-leave-active {animation: hide 1.2s;}.show-enter, .show-leave-to {opacity: 0;}.wrap {position: relative;width: 32px;height: 32px;}</style><script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script> </head> <body> <div id="app"><p>{{ message }}</p><div class="wrap"><transition name="show"><div class="d" v-for="item in list" :key="item.id" v-if="count === item.id">{{ item.text }}</div></transition></div><button @click="add">add</button> </div><script>new Vue({el: '#app',data () {return {message: 'Hello Vue.js!',count: 0,list: [{id: 0, text: 'aaa'},{id: 1, text: 'bbb'},{id: 2, text: 'ccc'}]}},methods: {add: function () {if (this.count < this.list.length - 1) {this.count += 1;} else {this.count = 0;}}}}) </script> </body> </html> 复制代码

这里需要注意的是父级使用relative，子级使用absolute进行定位，利用left值来进行位置的控制移动。这里如果使用transform的话，由于之前的div有一个渐变的消失过程，这个过程中他的位置一直有存在，造成了后面的div无法正确移动到对应位置，所以使用absolute更好。 实在不行可以使用transition的mode属性，设置成out-in，先让前者完成动画，让占据的位置完全消失，使得下一个div可以正常运动，不过这种方式只能先后完成动画，不能同时完成动画。

转载于:https://juejin.im/post/5b2e54bde51d4558da1ada43

总结

以上是生活随笔为你收集整理的使用vue的transition完成滑动过渡的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。