Question

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

按钮＃1向左滑动。
第2个按钮向右滑动。

反之亦然。

但是，当我启动转换时，将Button＃2插入DOM中，然后立即将Button＃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完成？我已经读过有关transition modes的内容，这些内容似乎完全可以满足我的需要，但是我无法让他们在这种情况下表现正常。

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

0 个答案: