當輸出轉換完成時，頁面的其余部分會向上然后再次向下為下一個影像騰出空間。（看我貼的gif）
這就是我實作過渡標簽的方式：
<div class="xs12 md6 lg6" >
<transition
v-if="heroImages[iterator] != undefined"
mode="out-in"
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
>
<div v-if="iterator%2 == 1" style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl heroImages[iterator].url"
alt=""
/>
</div>
<div v-else-if="iterator%2 == 0 && iterator != 4" style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl heroImages[iterator].url"
alt=""
/>
</div>
<div v-else style="display: flex;">
<img
class="heroImage xs10"
style="float:right;"
:src="baseUrl heroImages[iterator].url"
alt=""
/>
</div>
</transition>
</div>
迭代器每 2 秒更改一次 js 函式。這使影像發生變化。
如何避免影像之間的這種圖形“故障”？
uj5u.com熱心網友回復：
嘗試使用v-show而不是v-if v-show 與 v-if并在您的影像樣式上設定高度。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/315325.html
標籤：css Vue.js 动画片 css动画 css-transitions
上一篇：CSS影片無法正常作業