1. 基本用法
<transition>
是 Vue.js 中用于为元素和组件的进入、离开状态提供过渡效果的一个组件。它允许你在这些状态变化时应用 CSS动画或过渡效果。
使用 <transition>
组件<transition>
组件用于包裹需要动画效果的元素。它会在元素的进入和离开过程中自动添加和移除 CSS 类。
javascript
<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 实现:
javascript
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: 在元素离开时调用。
示例代码
javascript
<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; // 触发 reflow
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>
4. 过渡组 (Transition Group)
如果需要对列表中的项进行动画处理,可以使用 <transition-group>
组件。该组件允许你对数组变化(如添加、删除和重新排序)进行动画处理。
javascript
<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. 总结
- 使用 : 通过包裹元素来实现进入和离开的过渡效果。
- 定义 CSS 类: 根据 Vue 自动生成的类设置过渡效果。
- JavaScript 钩子: 自定义过渡逻辑以实现更复杂的动画效果。
- 使用 : 对列表项的添加、删除和排序进行动画处理。