vue是一款流行的javascript框架，它通过数据驱动的方式，协助开发者构建交互性强、数据呈现美观的单页 web 应用。vue内置了许多有用的特性，其中之一就是页面过渡动画。在本文中，我们将介绍如何使用vue的过渡动画功能，并且讨论最常见的动画效果。
实现Vue页面过渡动画
Vue的页面过渡动画是通过Vue的<transition>与<transition-group>组件实现的。下面我们分别介绍这两个组件。
<transition>
<transition>组件可以在被包裹的元素在插入、更新或者移除时，自动执行过渡动画效果。
该组件向外部发出before-enter、enter、after-enter、enter-cancelled和before-leave、leave、after-leave、leave-cancelled等钩子函数，让我们可以控制过渡的开始、结束和取消。
下面是一个简单的<transition>动画效果，展示了一个元素在插入时的过渡动画。请注意，该组件需要一个name属性，用于指定动画的名称。在下面的例子中，动画名称是fade。这里的CSS样式定义了开始和结束时元素的过渡动画效果。
立即学习“前端免费学习笔记（深入）”；
<template>
<div>
<button @click="show = !show">Toggle show</button>
<transition name="fade">
<div v-if="show">Hello Vue!</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
};
},
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style><transition-group>
<transition-group>组件与<transition>很相似，但是它适用于列表项或者表格等需要同时进行插入和移除的元素。
与<transition>组件一样，在<transition-group>组件中可以定义钩子函数，如before-enter、enter等。
<transition-group>需要指定一个tag属性，用于指定过渡组件生成的HTML标签类型。它还需要每个子元素带有一个唯一的键值，使Vue可以正确地识别插入、更新或者移除的元素。
在下面的例子中，我们展示了一个简单的列表，每当点击按钮时，都会添加或者删除一项。在这个例子中，我们使用了<transition-group>组件，并且指定了HTML标签类型为ul。列表中的每个项都带有一个键值，以帮助Vue正确地执行过渡动画。
<template>
<div>
<button @click="shift()">Add/Remove Item</button>
<transition-group name="list" tag="ul">
<li v-for="item in items" :key="item">{{ item }}</li>
</transition-group>
</div>
</template>
<script>
export default {
data() {
return {
items: ["Item 1", "Item 2", "Item 3", "Item 4", "Item 5"],
};
},
methods: {
shift() {
if (this.items.length > 0) {
this.items.shift();
} else {
this.items.push("New Item");
}
},
},
};
</script>
<style>
.list-enter-active,
.list-leave-active {
transition: all 0.5s;
}
.list-enter,
.list-leave-to {
opacity: 0;
transform: translateY(30px);
}
</style>常用的过渡动画效果
现在，我们已经介绍了如何使用Vue的过渡动画。下面让我们来看看一些常见的过渡动画效果。
Fade
Fade效果用于渐隐或者渐显的效果。它将元素的不透明度从0变化到1或者从1变化到0。
<transition name="fade">
<div v-if="show">Hello Vue!</div>
</transition>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>Slide
Slide效果用于元素从一侧滑出或者滑动到一侧的效果。它将元素的位置从一个位置移动到另一个位置。
<transition name="slide">
<div v-if="show">Hello Vue!</div>
</transition>
<style>
.slide-enter-active,
.slide-leave-active {
transition: transform 0.5s;
}
.slide-enter-to,
.slide-leave {
transform: translateX(100%);
}
.slide-enter,
.slide-leave-to {
transform: translateX(-100%);
}
</style>Scale
Scale效果用于元素从小到大或者从大到小的缩放效果。它将元素的宽度和高度从一种大小缩小到另一种大小。
<template>
<div>
<button @click="show = !show">Toggle show</button>
<transition name="scale">
<div v-if="show" class="box"></div>
</transition>
</div>
</template>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.scale-enter-active,
.scale-leave-active {
transition: transform 0.5s;
}
.scale-enter,
.scale-leave-to {
transform: scale(0);
}
</style>Rotate
Rotate效果用于元素绕着一个轴旋转的效果。它将元素绕着一个角度旋转。
<template>
<div>
<button @click="show = !show">Toggle show</button>
<transition name="rotate">
<div v-if="show" class="box"></div>
</transition>
</div>
</template>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
}
.rotate-enter-active,
.rotate-leave-active {
transition: transform 0.5s;
}
.rotate-enter,
.rotate-leave-to {
transform: rotate(180deg);
}
</style>总结
Vue的过渡动画功能可以让我们在页面元素插入、更新或者移除时，添加动画过渡效果，从而使页面更加生动和有趣。本文介绍了如何使用Vue的<transition>和<transition-group>组件来实现过渡动画，还介绍了几个常用的过渡动画效果。如果您需要为您的Vue应用添加动画效果，不妨通过这些组件来尝试一下。
