使用vue的transition完成滑动过渡

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

神圣光

13706人浏览 · 2018-06-23 22:07:43

神圣光 · 2018-06-23 22:07:43 发布

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^