如何在Vue過渡中去除過渡延遲？

Question

<p>我正在使用Vue來實現當滑鼠懸停在圖片上時，透過動畫將文字方塊向上移動並淡入。動畫效果是正確的，但是它有一個輕微的延遲才開始。我希望文字方塊在圖片懸停時能夠平滑且立即地開始淡入和向上移動。當遊標離開時，文字方塊能夠正確地淡出和向下移動。 </p> <pre class="brush:php;toolbar:false;">template: ` <div> <div class="attribute-icons" v-for="(item, i) in techBadges" :key="'tech_' i"> <img @mouseenter="hoverStart(i)" @mouseleave="hoverEnd" class="attribute-icon" width="30px" height="30px" :src="badges[item].imageSrc" :alt=" badges[item].alt"/> <Transition> <p v-show="hoveredIndex === i">{{ badges[item].description }}</p> </Transition> </div> </div> `, 方法：{ 懸停開始(i){ this.hoveredIndex = i; }, 懸停結束（）{ this.hoveredIndex = null; } },</pre>

.attribute-icons {
                    上邊距：5px；
                    職位：親屬；
                    轉換延遲：0s；

                    圖像{
                        寬度：28px；
                        高度：28像素；
                        右邊距：8px；
                        過渡：0.24s；
                        轉換延遲：0s；
                        
                    }

                    p {
                        位置：絕對；
                        頂部：20 像素；
                        寬度：19vw；
                        最大寬度：350px；
                        最小寬度：175px；
                        背景：#0088ce；
                        顏色：#ffffff；
                        z 索引：1；
                        邊框半徑：5px；
                        內邊距：5px 10px；
                        盒子陰影: 0 0 18px rgba(2, 2, 2, 0.14);
                        指針事件：無；
                        字體粗細：500；
                        字體大小：13px；
                        過渡：0.24s緩和；
                        轉換延遲：0s；
                        @media（最大寬度：1100px）{
                            寬度：25vw；
                        }
                        @media（最大寬度：991px）{
                            寬度：36vw；
                        }

                    }

                    .v-輸入-來自{
                        不透明度：0；
                        變換：翻譯Y（10px）；
                        過渡：不透明度 0.24s 緩動，變換 0.24s 緩動；
                        轉換延遲：0s；
                    };
                    .v-輸入-活動{
                        轉換延遲：0s；
                        過渡：不透明度 0.24s 緩動，變換 0.24s 緩動；
                        變換：翻譯Y（4px）；
                    };
                    .v-輸入-到{

                    };

                    .v-離開-來自{
                        變換：翻譯Y（10px）；
                    };
                    .v-離開活動{
                        過渡：不透明度 0.24s 緩動，變換 0.24s 緩動；
                        變換：翻譯Y（10px）；
                    };
                    .v-離開-至{
                        不透明度：0；
                    };</pre>
<p>我嘗試為所有元素添加transition-delay: 0s，但沒有作業。</p>

Answer 1

在Vue.js中，transition元件可讓您在元素插入、更新或從DOM中刪除時新增過渡效果。預設情況下，Vue在元素插入或刪除時會套用過渡延遲，這給用戶帶來了更平滑的過渡效果。然而，如果您想要移除過渡延遲，使元素立即出現或消失，您可以使用appear屬性以及CSS過渡屬性。

以下是您可以實現此目的的範例：

1. 在Vue元件的範本中，使用帶有appear屬性的transition元件：

<template>
  <transition appear name="fade">
    <div v-if="showElement" class="element">要显示的元素</div>
  </transition>
</template>

2. 在您的元件樣式部分或全域CSS中加入必要的過渡效果CSS：

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.0s; /* 将过渡延迟设置为0秒 */
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

在此範例中，fade類別被用作過渡名稱，但您可以將其替換為任何您喜歡的類別名稱。透過將transition屬性設為opacity 0.0s，您實際上是在移除過渡延遲。

請記住，雖然移除過渡延遲可能會提供立即的視覺變化，但也可能導致更突然的使用者體驗。過渡通常用於提供更平滑和更具視覺吸引力的介面。

請記住，Vue的行為可能會隨時間而變化，因此請確保查閱您使用的版本的官方Vue文檔，以獲取最準確和最新的資訊。