过渡
过渡是 Vue 中用于处理元素在插入、更新、删除时的动画效果的机制。Vue 3.0 中仍然使用 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>
export default {
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();
}
}
};
</script>
<style>
.fade-enter-active, .fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
在这个例子中，<transition> 元素包裹了一个 <p> 元素，通过在不同阶段监听事件（@before-enter、@enter、@leave）来定义过渡效果。
动画
动画在 Vue 中主要是通过 <transition-group> 元素来处理多个元素的过渡动画。它和过渡有些类似，但主要用于处理多个元素的添加、更新、删除等动态场景。
基本用法：
<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>
export default {
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);
}
}
}
};
</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> 元素，通过在不同阶段监听事件（enter-active、enter、leave-active、leave-to）来定义动画效果。
总的来说，过渡和动画是 Vue 中非常有用的特性，可以帮助你在用户界面中添加更加丰富和生动的交互效果。根据具体的业务需求，你可以选择使用过渡或动画来提高用户体验。
转载请注明出处：http://www.zyzy.cn/article/detail/502/Vue 3.0