運用vue的transition完成滑動過渡

2023年3月22日 136次阅读 来源: 海光

運用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://segmentfault.com/a/1190000015368427
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞