vue之过渡效果

vue2.0内置有过渡组件，使用也很简单，如下栗子：

组件

<transition name="fade">
<div v-show="btn" class="detail">
这里是组件
</div>
</transition>

css（使用的是stylus预处理器，’&’表示父级）

.detail
transition: all .5s
background: rgba(7, 17, 27, .8)
&.fade-enter-active
opacity: 0
background: rgba(7, 17, 27, 0)
transition: all 0s
&.fade-leave-active
opacity: 0
background: rgba(7, 17, 27, .8)
transition: all .5s

fade-enter-active为点击展示div的过渡起始效果

fade-leave-active为点击隐藏div的过渡结束效果

另外，在vue文档里官方详细的解释是：

v-enter：定义进入过渡的开始状态。在元素被插入时生效，在下一个帧移除。

v-enter-active：定义过渡的状态。在元素整个过渡过程中作用，在元素被插入时生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入一帧后生效 (于此同时 v-enter 被删除)，在 transition/animation 完成之后移除。

v-leave: 定义离开过渡的开始状态。在离开过渡被触发时生效，在下一个帧移除。

v-leave-active：定义过渡的状态。在元素整个过渡过程中作用，在离开过渡被触发后立即生效，在 transition/animation 完成之后移除。这个类可以被用来定义过渡的过程时间，延迟和曲线函数。

v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发一帧后生效 (于此同时 v-leave 被删除)，在 transition/animation 完成之后移除。