一. 效果图
先上效果图:
二. 代码
<template>
<div class="hello">
<button v-on:click="show = !show">Toggle</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
show: true,
};
},
};
</script>
<style lang="scss" scoped>
.fade-enter-active,
.fade-leave-active {
transition: opacity 1.5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}
</style>
三. 详解
Vue 在插入、更新或者移除 DOM 时,提供多种不同方式的应用过渡效果。包括以下工具:
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库,如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库,如 Velocity.js
transition组件会为嵌套元素自动添加class,可用于做css过度动画,下面具体解释。
1. 过渡的类名
2. 注意
对于这些在过渡中切换的类名来说,如果你使用一个没有名字的 <transition>
,则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">
,那么 v-enter
会替换为 my-transition-enter
。
v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线。