时间戳

首页 > 解决方案 > 两个元素之间的平滑 Vue 翻译过渡

css - 两个元素之间的平滑 Vue 翻译过渡

问题描述

我正在制作一个 Vue 动画，其中：

反之亦然。

但是，当我启动转换时，按钮 #2 插入到 DOM 中，并立即将按钮 #1 推到右侧，然后 #1 开始转换。

这是我的组件：

<transition name="detail">
    <div class="u-align-center" v-if="showShare">
        <button class="btn btn-wide u-ml-20 u-mr-40 u-align-center u-text-blue">
            Sample Button
        </button>
    </div>
</transition>
<transition name="detail">
    <div class="u-align-center u-ml-20 u-mr-40" v-if="!showShare">
        <button class="btn btn-blue u-mr-20 u-align-center" @click="showDetail = !showDetail" v-if="!showDetail">
            See List
        </button>
        <button class="btn btn-blue u-align-center u-mr-20" @click="showShare = !showShare" v-if="!showShare">
            Take With You
        </button>
    </div>
</transition>

这是我的 CSS：

.detail-enter {
    transform: translateX(-2500px);
}

.detail-enter-to {
    transform: translateX(0px);
}

.detail-leave {
    transform: translateX(0px);
}

.detail-leave-to {
    transform: translateX(-2500px);
}

.detail-leave-active {
    transition: all 1s cubic-bezier(.42,0,.58,1);
}

.detail-enter-active {
    transition: all 1s cubic-bezier(.42,0,.58,1);
    transition-delay: .75s;
}

这是我正在经历的 GIF：

https://www.dropbox.com/s/9vg7c9mrvxt5pyr/gif.gif?dl=0

有没有办法用 Vue Transitions 来完成这个？我已经阅读了关于转换模式的信息，它似乎完全符合我的需要，但我无法让它们在这种情况下表现。

标签： cssvue.jsvuejs2transition

解决方案

推荐阅读