Vue.js 过渡 动画

1. 基本用法

<transition> 是 Vue.js 中用于为元素和组件的进入、离开状态提供过渡效果的一个组件。它允许你在这些状态变化时应用 CSS动画或过渡效果。

使用 <transition> 组件<transition> 组件用于包裹需要动画效果的元素。它会在元素的进入和离开过程中自动添加和移除 CSS 类。

<template><div id="app"><button @click="show = !show">{{ show ? '隐藏' : '显示' }} 按钮</button><transition name="fade"><p v-if="show" class="fade">这是一个可见的段落！</p></transition></div>
</template><script>
export default {data() {return {show: false};}
};
</script><style>
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s ease;
}
.fade-enter, .fade-leave-to { /* 适用于 Vue 2.1.8 及以上版本 */opacity: 0;
}
</style>

说明

• 按钮: 点击按钮可以切换 show 状态，从而控制段落的显示与隐藏。
• : 用于包裹需要进行过渡效果的元素（这里是 <p> 标签）。

CSS 类定义:

• .fade-enter-active 和 .fade-leave-active 用于定义过渡效果的持续时间和缓动。
• .fade-enter 和 .fade-leave-to 控制元素在进入和离开时的不透明度。

2. CSS 过渡类

自动生成的类当你使用 <transition> 组件时，Vue 会根据指定的 name 属性自动生成一套 CSS 类。这些类包括：

• name-enter: 元素进入时的初始状态。
• name-enter-active: 元素进入时的过渡状态。
• name-leave: 元素离开时的初始状态。
• name-leave-active: 元素离开时的过渡状态。

以下是一个简单的 fade 过渡效果的 CSS 实现：

css
.fade-enter-active, .fade-leave-active {transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to { /* 适用于 Vue 2.1.8 及以上版本 */opacity: 0;
}

3. JavaScript 动画

对于更复杂的动画效果，可以使用 JavaScript 钩子函数来控制过渡。可以在以下事件中执行自定义逻辑：

• @before-enter: 在元素进入前调用。
• @enter: 在元素进入时调用。
• @leave: 在元素离开时调用。

示例代码

<template><div id="app"><button @click="show = !show">Toggle</button><transition@before-enter="beforeEnter"@enter="enter"@leave="leave"><p v-if="show">Hello, Vue.js!</p></transition></div>
</template><script>
export default {data() {return {show: false};},methods: {beforeEnter(el) {el.style.opacity = 0; // 设置初始透明度},enter(el, done) {el.offsetHeight; // 触发 reflowel.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>

4. 过渡组 (Transition Group)

如果需要对列表中的项进行动画处理，可以使用 <transition-group> 组件。该组件允许你对数组变化（如添加、删除和重新排序）进行动画处理。

<template><div><button @click="add">Add Item</button><transition-group name="list" tag="ul"><li v-for="item in items" :key="item.id">{{ item.text }}</li></transition-group></div>
</template><script>
export default {data() {return {items: []};},methods: {add() {const newItem = { id: Date.now(), text: 'New Item' };this.items.push(newItem);}}
};
</script><style>
.list-enter-active, .list-leave-active {transition: all 0.5s ease;
}
.list-enter, .list-leave-to { /* 适用于 Vue 2.1.8 及以上版本 */opacity: 0;transform: translateY(30px); /* 向下移动 */
}
</style>

5. 总结

1. 使用 : 通过包裹元素来实现进入和离开的过渡效果。
2. 定义 CSS 类: 根据 Vue 自动生成的类设置过渡效果。
3. JavaScript 钩子: 自定义过渡逻辑以实现更复杂的动画效果。
4. 使用 : 对列表项的添加、删除和排序进行动画处理。