vue2.0之transition

vue2.0的transition渐入渐出功能在1.0的基础上做了较大变动，功能也更强大。

1.0的写法是&.fade-transition

1
2
3
4
5
6
7
8

.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标签把要实现的部分包裹起来

1	`<transition` `name="fade"><p class="detail"` `v-show="show"> </p></transition>`

css：

1
2
3
4
5
6
7
8

.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)

过渡的类名

在进入/离开的过渡中，会有 6 个 class 切换。

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 完成之后移除。

vue2.0之transition

https://cn.vuejs.org/v2/guide/transitions.html