------------------------------------------------------------------
学习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>
2635
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
