<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
/*过渡动画效果*/
/*显示, 处理开始状态和过渡状态*/
/* 在动画显示之前添加v-enter和v-enter-active */
.v-enter {opacity: 0;}
/* 在动画显示下一帧移除v-enter添加v-enter-to,移除v-enter以后默认就是1 */
.v-enter-active {transition: opacity 1s;}
/*动画结束之后移除所有的动画class*/
/*隐藏，处理结束状态和过渡状态*/
/*在动画离开之前，opacity默认为1，添加v-leave和v-leave-active*/
.v-leave-active {transition: opacity 1s;}
/*动画离开触发之后下一帧移除v-leave添加v-leave-to*/
.v-leave-to {opacity: 0}
/*动画结束之后移除所有的动画class*/
</style>
</head>
<body>
<div id="app">
<h3>vue中的css动画原理</h3>
<!--
当插入/显示或删除/隐藏包含在 transition 组件中的元素或组件时，Vue 将会做以下处理：
1.自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。
2.如果过渡组件提供了 JavaScript 钩子函数，这些钩子函数将在恰当的时机被调用。
3.如果没有找到 JavaScript 钩子并且也没有检测到 CSS 过渡/动画，DOM 操作 (插入/删除) 在下一帧中立即执行
-->
<!--
过渡的类名,在进入/离开的过渡中，会有 6 个 class 切换。transition标签name属性指定class类的前缀
例如：<transition name='fade'></transition>,class由v-enter变成fade-enter
//插入/显示/渲染
v-enter: 定义元素过渡开始状态，在被插入之前生效，在插入之后(插入的一瞬间)移除class
v-enter-active: 定义进入过渡生效时的状态，同v-enter添加class，同v-enter-to移除class
这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 定义进入过渡结束时的状态，在元素被插之后生效，同时v-enter移除，在过渡/动画完成之后移除class
//离开/隐藏/销毁
v-leave: 定义元素过渡开始状态，在离开过渡被触发时生效，触发后下一帧被移除class
v-leave-active: 定义离开过渡生效时的状态, 同v-leave添加class，同v-leave-to移除class
这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 定义离开过渡的结束状态,在离开过渡被触发之后下一帧生效，同时v-leave移除，在过渡/动画完成之后移除class
-->
<transition>
<!-- v-if, v-show,动态组件都可以自带动画效果 -->
<div v-if="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
</body>
<script type="text/javascript">
let vm = new Vue({
el: '#app',
data: {
show: true
},
methods: {
handleClick () {
this.show = !this.show
}
}
})
</script>
</html>
浙公网安备 33010602011771号