过渡（Transitions）
过渡主要用于在元素进入或离开 DOM 时应用一些效果。你可以通过 transition 元素或 transition 动态组件来定义过渡效果。
<template>
<transition name="fade" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<p v-if="show">这是一个过渡效果</p>
</transition>
<button @click="toggleShow">切换显示状态</button>
</template>
<script>
const app = Vue.createApp({
data() {
return {
show: false
};
},
methods: {
toggleShow() {
this.show = !this.show;
},
beforeEnter(el) {
el.style.opacity = 0;
},
enter(el, done) {
el.offsetHeight; // 强制重绘
el.style.transition = "opacity 0.5s";
el.style.opacity = 1;
done();
},
leave(el, done) {
el.style.transition = "opacity 0.5s";
el.style.opacity = 0;
done();
}
}
});
app.mount('#app');
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
在这个例子中，通过 transition 元素包裹了一个 <p> 元素，当 show 的值变化时，Vue 会根据过渡的不同阶段（before-enter、enter、leave）调用相应的方法。
动画（Animations）
Vue 3.0 中，你可以使用 <transition-group> 元素或动态组件 transition 来为多个元素添加动画效果。
<template>
<transition-group name="list" tag="ul">
<li v-for="item in list" :key="item.id" @click="removeItem(item)">
{{ item.text }}
</li>
</transition-group>
<button @click="addItem">添加项</button>
</template>
<script>
const app = Vue.createApp({
data() {
return {
list: [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' }
]
};
},
methods: {
addItem() {
const newItem = {
id: this.list.length + 1,
text: `Item ${this.list.length + 1}`
};
this.list.push(newItem);
},
removeItem(item) {
const index = this.list.indexOf(item);
if (index !== -1) {
this.list.splice(index, 1);
}
}
}
});
app.mount('#app');
</script>
<style>
.list-enter-active, .list-leave-active {
transition: transform 0.5s;
}
.list-enter, .list-leave-to {
transform: translateY(30px);
opacity: 0;
}
</style>
在这个例子中，通过 transition-group 元素包裹了一个 <ul> 元素，并使用 v-for 渲染了一组 <li> 元素。当数组 list 变化时，Vue 会根据动画的不同阶段（enter-active、enter、leave-active、leave-to）调用相应的方法。
这里的样式设置了平移和透明度的过渡效果，使得在元素进入或离开时，有一个平滑的动画效果。
总的来说，在 Vue.js 3.0 中，过渡和动画的使用方式和 Vue 2.x 类似，但是有一些细微的变化。根据实际需求，你可以选择使用过渡或动画来增强用户体验。
转载请注明出处：http://www.pingtaimeng.com/article/detail/501/Vue 3.0