使用vue的transition完成滑动过渡
生活随笔
收集整理的這篇文章主要介紹了
使用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完成滑动过渡的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 从零开始学 Web 之 DOM（六）为元
- 下一篇： python安装pymssql