使用vue的transition完成滑动过渡

最新推荐文章于 2024-05-23 19:22:50 发布

神圣光

最新推荐文章于 2024-05-23 19:22:50 发布

阅读量1.3w

点赞数

分类专栏：前端学习文章标签：前端 vue transition

本文链接：https://blog.csdn.net/weixin_41399785/article/details/80787505

版权

前端学习专栏收录该内容

16 篇文章 0 订阅

订阅专栏

使用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可以正常运动，不过这种方式只能先后完成动画，不能同时完成动画。

神圣光

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
使用vue的transition完成滑动过渡

使用vue来做一些小巧的动画效果是非常方便的，今天本人想使用vue的transition来完成一个滑动过渡效果，这里和大家分享一下。直接上源代码：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Vue滑动效果&lt;/title&gt;
复制链接

扫一扫