Vuejs来回过渡跳到后面的最后一帧

Question

我正在创建一个仅包含 2 个项目的滑块元素。当我单击返回/下一步时，我希望它们能够顺畅地左右滑动。单击下一步时效果很好，元素滚动和淡出，但是当我单击返回时，无论我做什么，第一个元素都会及时跳转，这个 gif 更直观地解释了一点：

编辑：这是一个小提琴 - http://jsfiddle.net/eywraw8t/273583/

这是我的 CSS：

.first-slide-enter{
  opacity: 0;
  transform: translatex(-100%);
  transition: all 1.5s ease-out;
}
.first-slide-enter-to{
  opacity: 1;
  transform: translatex(0);
  transition: all 1.5s ease-out;
}
.first-slide-leave-to{
    opacity: 0;
    transform: translatex(-100%);
    transition: all 1.5s ease-out;
}


.second-slide-enter{
  opacity: 0;
  transform: translatex(0);
  transition: all 1.5s ease-out;
}
.second-slide-enter-to{
    opacity: 1;
    transform: translatex(-100%);
    transition: all 1.5s ease-out;
}
.second-slide-leave-to{
    opacity: 0;
    transform: translatex(0);
    transition: all 1.5s ease-out;
}

这是我的html：

        <transition name="first-slide">
            <div v-if="!newShortcut.link">

                <div id="drop-shortcut" class="drag-file clickable" @click="addShortcut">
                    <i class="fas fa-file-upload fa-lg"></i>
                    <p style="margin:20px 0 0;">Drag file here
                        <br> or click to browse</p>
                </div>                      
                <div>
                        <button @click="newShortcut.link = !newShortcut.link">Next</button>
                </div>

            </div>
        </transition>

        <transition name="second-slide">
            <div v-if="newShortcut.link">
                <div id="drop-icon" class="drag-file" @click="">
                    <i class="far fa-file-image fa-lg"></i>
                    <p style="margin:20px 0 0;">Drag file here
                        <br> or click to browse</p>
                </div>
                <div>
                    <button @click="newShortcut.link = !newShortcut.link">back</button>
                </div>
            </div>
        </transition>

如何做到这一点？

Answer 1

所以@Julian 对于阻塞问题是正确的，但还有另一种方法可以解决它，它可能对你更有效。看到这个小提琴：http://jsfiddle.net/xcmn76Lo/

基本上需要对第二张幻灯片进行一些调整。您可以使用类似于enter 的钩子来指定它从哪里开始离开。在这种情况下，由于其他 div 会立即保留其空间，因此您需要适当地启动离开过渡偏移。

.second-slide-leave{
  transform:translatex(-100%);
}

然后，将leave-to 设置为 0（也就是如果被传入的 div 移到它会结束的位置），而不是转换为 100%。

.second-slide-leave-to{
    opacity: 0;
    transform: translatex(0);
    transition: all 1.5s ease-out;
}

Answer 2

问题在于您的元素的显示方式。每张幻灯片都是一个block，因此它会在您的布局中占据一个空间。

因此，当您在第二张幻灯片上并单击后退按钮时。 在此之前发生的情况是，布局中没有幻灯片 1，当 vue 开始将幻灯片 1 插入时，它占用了一个空间，导致第二张幻灯片突然从左跳到右。

因此，要解决该问题，您可以将每张幻灯片的位置设置为 absolute，这样如果它们被插入回来，它们就不会导致这种行为，因为 absolute 的位置不会影响它的相邻元素的位置，这与 relative 不同位置。

#app>div {
  position: absolute;
  height: 200px;
  width: 200px;
  text-align: center;
  left: 0;
  top: 0;
}

并稍微更新第二张幻灯片的 css 过渡：

.second-slide-enter {
  opacity: 0;
  transform: translatex(100%);
  transition: all 1.5s ease-out;
}

.second-slide-enter-to {
  opacity: 1;
  transform: translatex(0);
  transition: all 1.5s ease-out;
}

.second-slide-leave-to {
  opacity: 0;
  transform: translatex(100%);
  transition: all 1.5s ease-out;
}

这是完整的 JS Fiddle：http://jsfiddle.net/eywraw8t/273631/