import { ref, onMounted } from 'vue';
export default {
setup() {
const isVisible = ref(false);
onMounted(() => {
isVisible.value = true;
});
return {
isVisible
}
}
}ref建立了一個回應式的isVisible變量，並在元件的onMounted生命週期函數中將其設為true。透過修改isVisible的值，我們可以實現動態控制元素的顯示和隱藏。 <transition>元件包裹需要套用動畫效果的元素，並透過新增類別名稱來指定不同階段的動畫效果。而在Vue3中，除了可以繼續使用<transition>組件，還引入了<transition-group>和<teleport>組件，使動畫效果的實現更加靈活和有效率。 <transition>元件實作的簡單淡入淡出效果的範例：<template>
<transition name="fade">
<p v-if="isVisible">Hello, Vue3!</p>
</transition>
</template>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style><transition>元件包覆了一個<p>元素，並指定了動畫效果的名稱為"fade"。在CSS樣式中，我們定義了動畫的進入和離開階段的樣式，透過新增類別名稱來觸發動畫效果。 <Transition>元件，我們可以很方便地整合GSAP，並使用其動畫效果功能。 <template>
<transition
name="rotate"
enter-active-class="rotate-enter-active"
enter-from-class="rotate-enter-from"
>
<div v-if="isVisible" class="box"></div>
</transition>
</template>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.rotate-enter-active {
animation: rotateEnter 1s;
}
@keyframes rotateEnter {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>@keyframes來實現旋轉效果。透過為<transition>元件加入enter-active-class和enter-from-class屬性，將CSS動畫套用到動畫效果中。
<p>總結：<transition-group> ;和<teleport>元件，擴展了動畫效果的應用場景；內建對GSAP的支持，提供了更強大的動畫庫整合。
<p>以上是Vue3相比Vue2更強大的動畫效果支援的介紹和程式碼範例。新的動畫功能使得我們在建立精美的使用者介面時更加便捷和靈活，加上Vue3帶來的其他增強，我們可以更有效率地開發出優秀的Vue應用程式。 以上是Vue3和Vue2的區別：更強大的動畫效果支持的詳細內容。更多資訊請關注PHP中文網其他相關文章！
