显示原理:
- <transition name='fade'>
- <div v-if='show'>hello world</div>
- </transition>
当一个元素被 transition 包裹了之后, vue 会自动当分析元素的 CSS 样式, 然后构建一个动画的流程, 在动画即将被执行的一瞬间, vue 会在内部标签上增加两个 class 名字, 分别是 fade-enter,fade-enter-active, 在动画执行到第二帧的时候, 也就是动画开始后, fade-enter 会变成 fade-enter-to, 动画执行到最后到时候, vue 会干一件事情, 把之前添加到 fade-enter-to,fade-enter-active 这两个 class 去除掉
- <style>
- .fade-enter{
- opacity: 0;
- }
- .fade-enter-active{
- transition: opacity 3s;
- }
- </style>
- <div id='App'>
- <transition name='fade'>
- <div v-if='show'>hello world</div>
- </transition>
- <button @click='handleClick'> 切换 </button>
- </div>
- <script>
- var vm = new Vue({
- el:'#App',
- data:{
- show:true
- },
- methods:{
- handleClick:function(){
- this.show = !this.show;
- }
- }
- })
- </script>
在第 0s 的时候样式由 fade-enter 控制, 透明度为 0, 当第二帧的时候, 透明度在 3s 内由 0 到 1 过度, 如果 transition 的 name 不写, 默认样式是 v-enter, v-enter-active
隐藏原理
当一个元素被 transition 包裹了之后, 元素由显示到隐藏, 是这样一个流程, 在隐藏的第一个瞬间, vue 会给元素新增两个 class,fade-leave,fade-leave-active, 在第二帧的时候, 会把 fade-leave 去掉, 更新为 fade-leave-to, 在最后的时候, 会把 fade-leave-to,fade-leave-active 都去除掉
- <style>
- .v-enter{
- opacity: 0;
- }
- .v-enter-active{
- transition: opacity 3s;
- }
- .v-leave-to{
- opacity: 0;
- }
- .v-leave-active{
- transition: opacity 3s;
- }
- </style>
- <div id='App'>
- <transition>
- <div v-if='show'>hello world</div>
- </transition>
- <button @click='handleClick'> 切换 </button>
- </div>
- <script>
- var vm = new Vue({
- el:'#App',
- data:{
- show:true
- },
- methods:{
- handleClick:function(){
- this.show = !this.show;
- }
- }
- })
- </script>
加上上面两个 class 隐藏的效果就出来了, 为什么呢, 从动画开始到结束, fade-leave-active 都存在, 也就是在动画运行的过程中, 时刻监听着这个 opacity 这个属性, 一旦 opacity 发生变化, 就让 opacity 在 3s 中慢慢的进行过度, 在第一瞬间, 也就是 fade-leave 的时候, opacity 还是显示的, 为 1
这种动画效果, 叫做过渡的动画效果, 也叫 CSS 动画
来源: http://www.bubuko.com/infodetail-2774487.html