1.0 版本实现detail组件的淡入淡出
html:
transition作为一个属性,可以取值。
<div v-show="show" class="detail" transition="fade">
css(stylus):
注意类名的写法,1.0的写法是&.fade-transition
.detail
transition all 0.5s
&.fade-transition
opacity 1
background rgba(7,17,27,0.8)
&.fade-enter,&.fade-leave
opacity 0
background rgba(7,17,27,0)
2.0版本:
html :
用transition标签把要实现的部分包裹起来
<transition name="fade">
<div v-show="show" class="detail">
</transition>
css:
.detail
opacity 1
background rgba(7,17,27,0.8) //渐变结束后的最终效果
&.fade-enter-active, &.fade-leave-active //渐变的进入和退出都历时0.5s
transition all 0.5s
&.fade-enter, &.fade-leave-to //定义进入前和退出后样式,即透明无色背景。
opacity 0
background rgba(7,17,27,0)
关于类名的含义和用途,见官网文档https://cn.vuejs.org/v2/guide/transitions.html
过渡的类名
在进入/离开的过渡中,会有 6 个 class 切换。
1. v-enter:定义进入过渡的开始状态。在元素被插入时生效,在下一个帧移除。
2. v-enter-active:定义过渡的状态。在元素整个过渡过程中作用,在元素被插入时生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (与此同时 v-enter 被删除),在 transition/animation 完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效,在下一个帧移除。
5. v-leave-active:定义过渡的状态。在元素整个过渡过程中作用,在离开过渡被触发后立即生效,在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间,延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (与此同时 v-leave 被删除),在 transition/animation 完成之后移除。