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

问题是由于元素的显示方式。 每张幻灯片都是一个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小提琴： http : //jsfiddle.net/eywraw8t/273631/

Answer 2

因此，@ Julian对于阻止问题是正确的，但是还有另一种修复它的方法可能会对您更好。 看到这个小提琴： http : //jsfiddle.net/xcmn76Lo/

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

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

然后，而不是过渡到100％，集leave-to 0（又名它最终会如果由输入格上移动）。

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