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

问题出在您的元素显示方式上。每张幻灯片都是undefined method `reflect_on_association' for #<Widget:0x007f9a4cdedb98>，因此在布局中会占据一个空间。

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

为解决该问题，您可以将每张幻灯片的位置设为block，这样，如果将它们插入回去，它们就不会引起这种行为，因为absolute的位置不会影响其相邻元素的位置。 absolute位置。

relative

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

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

这是完整的JS小提琴：http://jsfiddle.net/eywraw8t/273631/

Answer 2

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

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

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

然后将leave-to设置为0（而不是过渡到100％）（也就是如果被传入的div移动，它将在此处结束）。

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

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

2 个答案: