Vue中如何让Div跟随滑动过渡动画同步移动？

问题根源在于当前代码中，按钮的位置变化是flex布局因新元素（状态文本）加入而瞬间重排导致的，而状态文本的动画是独立的transform过渡，两者没有同步，所以呈现出按钮先跳走、文本再滑入的效果。

解决方案 #

通过给flex布局中的填充元素（.filler）添加flex-grow属性的过渡，让按钮的位置变化拥有和文本一致的动画时长，同时保持文本的滑入动画，实现两者同步移动。

修改后的完整代码 #

HTML

<div id="app">
    <div class="container" :class="{ 'has-status': toggle }">
        <div class="filler"></div>
        <button v-on:click="SlideIn">Test</button>
        <transition name="slide">
            <div v-if="toggle">Status update</div>
        </transition>
    </div>
</div>

CSS

.container {
    width: 200px;
    height: auto;
    display: flex;
}

.filler{
    flex-grow: 1;
    /* 给填充元素添加flex-grow过渡，同步按钮位置变化 */
    transition: flex-grow 1s ease;
}

/* 当显示状态文本时，填充元素收缩 */
.container.has-status .filler {
    flex-grow: 0;
}

.slide-leave-active,
.slide-enter-active {
    transition: transform 1s ease;
}
.slide-enter {
    transform: translate(100%, 0);
}
.slide-leave {
    transform: translate(-100%, 0);
}

JavaScript

var app = new Vue({
    el: "#app",
    data: {
        toggle: false
    },
    methods: {
        SlideIn: function () {
            this.toggle = !this.toggle;
        }
    }
});

效果说明 #

当点击按钮时，.filler会从占满剩余空间平滑收缩到0，带动按钮同步左移；同时状态文本保持原有的右侧滑入过渡，两者动画时长一致，最终实现按钮与文本一同滑动汇合的效果。

内容的提问来源于stack exchange，提问作者Tadhg