鍍金池/ 問(wèn)答/HTML5  網(wǎng)絡(luò)安全  HTML/ 使用vue過(guò)渡動(dòng)畫(huà)過(guò)程中遇到的問(wèn)題，大家共同探討一下

使用vue過(guò)渡動(dòng)畫(huà)過(guò)程中遇到的問(wèn)題，大家共同探討一下

這里主要要完成的效果是：當(dāng)前元素左移消失（過(guò)程中透明度逐漸為0），新元素緊隨其后左移到上一個(gè)元素的位置（透明度在移動(dòng)的過(guò)程中從0到1）。這里出現(xiàn)的問(wèn)題是兩個(gè)div并未緊貼著完成動(dòng)畫(huà)，而是一直保持這距離，使得整個(gè)效果過(guò)于生硬。

以下是全部源代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 測(cè)試實(shí)例 - 菜鳥(niǎo)教程(runoob.com)</title>
    <style>
        .d {
            position: relative;
            border: 1px solid red;
            width: 30px;
            height: 30px;
        }
        @keyframes show {
            0% {
                opacity: 0;
                transform: translateX(30px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        @keyframes hide {
            0% {
                opacity: 1;
                transform: translateX(0);
            }
            100% {
                opacity: 0;
                transform: translateX(-30px);
            }
        }
        .show-enter-active {
            animation: show 2s;
        }
        .show-leave-active {
            animation: hide 1s;
        }
        .show-enter, .show-leave-to {
            opacity: 0;
        }
        .wrap {
            display: flex;
        }
    </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>
回答
編輯回答
神曲

沒(méi)有平滑的過(guò)渡是因?yàn)?code>div.b的橫向排列方式。
當(dāng)前一個(gè)div消失時(shí)，會(huì)突然增加后者需要前進(jìn)的距離，這樣就不協(xié)調(diào)了。也是之前設(shè)置成2s的原因。

.d {
  position: absolute;
  ...
}
.show-enter-active {
  animation: show 1s;
}
2017年12月10日 22:26