Javascript Vuejs来回转换向前跳到后面的最后一帧

我正在创建一个仅包含2项的滑块元素。我希望当我单击“上一步/下一步”时，它们能够平滑地左右滑动。当我单击“下一步”，元素滚动并淡出时效果很好，但当我单击“上一步”时，无论我做什么，第一个元素都会在时间上向前跳跃，这张gif更直观地解释：

编辑：这是一把小提琴-

这是我的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>

将文件拖到此处

或点击浏览

下一个
将文件拖到此处

或点击浏览

返回

---

如何实现这一点？

问题在于元素的显示方式。每张幻灯片都是一个

块

，因此它在布局中占据了一个空间

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

因此，为了修复该行为，您可以将每个幻灯片的位置设置为绝对位置，这样，如果它们被插回，它们将不会导致此类行为，因为绝对位置不会影响其相邻元素的位置，而与相对位置不同

#app>div{
位置：绝对位置；
高度：200px；
宽度：200px；
文本对齐：居中；
左：0；
排名：0；
}

问题在于元素的显示方式。每张幻灯片都是一个

块

，因此它在布局中占据了一个空间

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

因此，为了修复该行为，您可以将每个幻灯片的位置设置为绝对位置，这样，如果它们被插回，它们将不会导致此类行为，因为绝对位置不会影响其相邻元素的位置，而与相对位置不同

#app>div{
位置：绝对位置；
高度：200px；
宽度：200px；
文本对齐：居中；
左：0；
排名：0；
}

因此@Julian对于阻塞问题是正确的，但是有另一种方法可以解决它，这可能对您更有效。看这把小提琴：

基本上需要对第二张幻灯片进行一些调整。您可以使用一个类似于

enter

的钩子来指定它从何处开始离开。在这种情况下，由于另一个div立即保留其空间，因此您需要适当地开始休假转换偏移

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

然后，将

leave to

设置为0，而不是转换为100%（也就是说，如果被传入的div移动，它将结束）

---

因此@Julian对于阻塞问题是正确的，但是有另一种方法来解决它，可能对您更有效。看这把小提琴：

基本上需要对第二张幻灯片进行一些调整。您可以使用一个类似于

enter

的钩子来指定它从何处开始离开。在这种情况下，由于另一个div立即保留其空间，因此您需要适当地开始休假转换偏移

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

然后，将

leave to

设置为0，而不是转换为100%（也就是说，如果被传入的div移动，它将结束）

---

我正在看，但如果你能贴一把工作小提琴，这将有助于lot@raphadko小提示：使用

将更改
css属性，以提高动画的fps（对我来说似乎有点滞后）。（仅受现代浏览器支持）我正在查看它，但如果你能发布一个工作小提琴，这将有助于lot@raphadko小提示：使用
将更改
css属性，以提高动画的fps（对我来说似乎有点滞后）。（仅受现代浏览器支持）似乎有效，但由于父项是固定的，在我的网站上，它的高度为0，因为所有子项都是绝对定位的。有没有关于如何在不使用绝对值的情况下执行此操作的想法？顺便说一下，即使它不是绝对值，也应该从transformx（-100%）开始，因此即使其他元素正在取代它的位置，它仍然会在那里，对吗？没有，
translateX
实际上不会“按字面意思”移动您的元素。我的意思是，盒子占据的空间仍然在同一个空间上，尽管它看起来像是在最左边。只有使用
left
而不是“transform:translateX”，才能实现位置的
true
更改。当您还使用
left
、
top
、
right
或
bottom
时，您需要将元素的
位置
属性设置为
相对
、
固定
、
绝对
，等等。。。要使其工作。您最好的选择是使用
位置
，但您需要专门设置容器的高度。@JulianPaoloDayag看到我的答案，您应该能够偏移动画的开头，它应该工作得很好。似乎可以工作，但由于父级是固定的，在我的网站上，它的高度为0，因为所有的孩子都是绝对定位的。有没有关于如何在不使用绝对值的情况下执行此操作的想法？顺便说一句，即使它不是绝对值，也应该从transformx（-100%）开始，因此即使其他元素正在取代它的位置，它仍然会在那里，对吗？没有，
translateX
实际上不会移动您的元素