vue.js 过渡效果之css过渡

最新推荐文章于 2024-08-22 09:36:12 发布

wi_tim

最新推荐文章于 2024-08-22 09:36:12 发布

阅读量989

点赞数

分类专栏： vue.js学习笔记

本文链接：https://blog.csdn.net/wi_tim/article/details/70947140

版权

vue.js学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

------------------------------------------------------------------

学习css过渡总结

-----------------------------------------------------------------------

css 过渡添加的class

v-enter: 定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。
v-enter-active: 定义进入过渡的结束状态。在元素被插入时生效，在 transition/animation 完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。
v-leave-active: 定义离开过渡的结束状态。在离开过渡被触发时生效，在 transition/animation 完成之后移除

个人理解

    要搞清楚动画原理必须知道
           v-show 是再改变 display属性
           在v-show中执行css 动画最终显示是由 v-show 决定的中间的动画只是在v-show产生改变时中间添加的
           在v-show变化了之后中间动画产生的所有属性都会还原并不会保留在css属性之中

此例的执行过程

class代码

.fade-enter-active,.fade-leave-active{

                                                    transition:opacity .5s
                                             }
                       .fade-enter,.fade-leave-active{
                                                    opacity:0
                                      }

当第一次点击隐藏时 vue会给要影藏的元素添加 .fade-leave-active 的class 此class中包含元素的所有基本属性即当前的最终css属性所以包括opacity=1，
然后又给 .fade-leave-active 添加opacity:0 覆盖opacity=1，即点击时让元素由原来的 opacity=1 变化到 0，并且产生动画效果当动画执行完后 v-show 执行此例

v-show变为 false ，然后删除 class .fade-leave-active ，使原来的css 属性还原所以opacity得值又变为1 即最终影响元素影藏的是v-show的值

当第二次点击显示时 vue给元素添加 .fade-enter-active 此class中包含元素的所有基本属性即当前的最终css属性所以包括opacity=1，然后又添加 .fade-enter 里面定

义 opacity:0 所以执行动画使元素的 opacity=0 变化到opacity=1; （注意vue产生动画是根据.fade-enter-active class的值得）当动画执行完后 v-show 执行此例

v-show变为 true ，然后删除 class .fade-enter-active ，.fade-enter 使原来的css 属性还原所以opacity得值又变为1

------------------------------------------------

源码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>过渡</title>
	<script type="text/javascript" src="vue.js"></script>
	<style type="text/css">
		.fade-enter-active,.fade-leave-active{

     	  	  	transition:opacity .5s
     	  	  }
     	         .fade-enter,.fade-leave-active{
     	  	  	opacity:0
     	  	  }
    	</style>
</head>
<body>
 <div id="demo">
 	 <input type="button" value="toggle"  @click="show=!show"/ >
 	 <transition name='fade'>
 	 <span v-if='show'>
 	 	  loooh
 	 </span>
 	 </transition>
 </div>
     <script type="text/javascript">
     	  new Vue({

     	  	  el:"#demo",
     	  	  data:{
     	  	  	  show:true,
     	  	  },


     	  })


     </script>
</body>
</html>