温故而知新之VUE（四）

进入\离开&列表过渡

单元素/组件的过渡

transition

// 没有name，css默认为v-enter...

    hello

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

#过渡的类名

v-enter 定义进入过渡的开始状态，元素插入之前生效
v-enter-active 定义进入过渡生效时的状态，在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除，定义进入过渡的过程时间，延迟和曲线函数
v-enter-to 2.1.8+ 定义进入过渡的结束状态
v-leave 定义离开过渡的开始状态
v-leave-active 定义离开过渡生效时的状态
v-leave-to 2.1.8+ 定义离开过渡的结束状态
#css动画
动画中的v-enter类名在节点插入DOM后不会立即删除，而是在animationend事件触发时删除

.v-active{
  animation: bounce-in .5s
}
.v-leave-actiove{
  animation: bounce-in .5s reverse
}
@keyframes bounce-in{
  0% {
        transform:scale(0)
  }
  100%{
       tranform:scale(1)
  }
}

#自定义过渡的类名

enter-class
enter-active-class
enter-to-class (2.1.8+)
leave-class
leave-active-class
leave-to-class(2.1.8+)
优先级高于普通的类名，可以结合第三方css动画库（Animate.css）
#同时使用过渡和动画
#显性的过渡持续时间
2.2.0+新增

#javascript钩子



// methods中定义这些方法

当只用JavaScript过渡的时候，在enter和leave中必须使用done进行回调，否则会被同步调用
推荐对于仅使用JavaScript过渡的元素添加"v-bind:css='false'",vue会跳过css的检测，避免过渡过程中CSS的影响
#初始渲染的过渡
可以通过appear特性设置节点在初始渲染的过渡

#多个元素的过渡
对于原生标签可以使用v-if/v-else

// 设置key

// 简写

#过渡模式

in-out 新元素先进行过渡，完成之后当前元素过渡离开
out-in 当前元素先进行过渡，完成之后新元素过渡进入

多个组件的过渡

列表过渡

使用组件

会呈现出一个真实的标签,可以通过tag修改
过渡模式 mode不可用
内部元素总是需要提供唯一的key属性值


  {{ item }}

列表的排序过渡

还可以改变定位，使用v-move特性
通过name属性来自定义前缀，也可以通过move-class属性手动设置


  {{ item }}

.fade-move{
  transition: transform 1s;
}

可复用的过渡

要创建一个可复用过渡组件，你需要做的就是将或者作为根组件，然后将任何子组件放置在其中就可以了。