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;
}