vue入门（五）过渡＆动画

一、单元素、组件的过渡

    transition的封装组件，在使用v-if、v-show、动态组件、组件根节点中，可以给任何元素和组件添加过渡

当插入或删除包含在transition组件中的元素时，Vue会探测元素是否使用CSS过渡或动画、JS钩子函数调用。

1、过渡的类名

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

①v-enter：元素被插入之前生效

②v-enter-active：整个进入过渡动画

③v-enter-to：进入过渡结束后，元素被插入后的状态

④v-leave：离开过渡触发时

⑤v-leave-active：整个离开过渡阶段

⑥v-leave-to：离开后

v-是这些类名的默认前缀，也可以自定义name来替换这个v-前缀<transition name="my-transition">。

transition: property duration timing-function delay;   
 //（CSS属性名：当指定的 CSS 属性改变时过渡效果将开始，默认all)、过渡时间、
//（速度曲线:默认ease）、效果delay多久开始）

2、CSS过渡

在类中设置各种过渡的动画

3、CSS动画

用法同CSS过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而在 animationend 事件触发时删除

animation用于设置六个动画属性

（需要绑定到选择器的 keyframe 名称，）

animation-name	规定需要绑定到选择器的 keyframe 名称。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

 

4、自定义过渡的类名

默认类名去掉v-，在后面添加class类名：如enter-active-class，其优先级高于普通类名

5、同时使用过渡和动画

通过transitioned或animationend监听事件知道过渡的完成，若同时使用两种过渡，则需使用type设置监听的类型

6、JS钩子

可以在属性中声明JS钩子,钩子函数可以结合transitions/animations使用，也可单独使用。只使用JS过渡是，在enter和leave中必须使用done回调，可以添加v-bind:css="false"以避免过渡过程中CSS的影响。

<transition
  v-on:before-enter="beforeEnter"
  v-on:after-enter="afterEnter"></transition>

methods: {
  beforeEnter: function (el, done) {
    // ...
    done()
  }}// 当与 CSS 结合使用时 回调函数 done 是可选的

二、初始渲染的过渡

可以通过appear特性设置节点在初始渲染的过渡，与进入/离开过渡一样，可以自定义CSS类名，自定义JS钩子

<transition
  appear
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class" (2.1.8+)
  appear-active-class="custom-appear-active-class"
></transition>

三、多个元素的过渡

对于原生标签可以使用 v-if/v-else，当标签名相同时，添加key来让Vue区分它们。

也可以给同一个元素的key设置不同的状态来代替v-if和v-else。

<transition>
  <button v-bind:key="isEditing">
    {{ isEditing ? 'Save' : 'Edit' }}
  </button>
</transition>

<transition> 默认 进入和离开同时发生，Vue提供了一下过渡模式mode特性 ,如<transition mode="in-out>

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

out-in：当前元素先进行过渡，完成之后新元素过渡进入(先出后进)

四、多个组件的过渡

不需要使用key，直接使用动态组件

<transition name="component-fade" mode="out-in">
  <component v-bind:is="view"></component>
</transition>

new Vue({
  el: '#transition-components-demo',
  data: {
    view: 'v-a'
  },
  components: {
    'v-a': {
      template: '<div>Component A</div>'
    }
  }
})

五、列表过渡

    同时渲染整个列表，使用 <transition-group> 组件，默认以一个<span>元素存在，也可通过tag修改为其他元素，内部元素总压提供唯一的key属性值。

1、进入与离开：立即进入到新的位置

2、排序过渡：v-move 特性在元素的改变定位的过程中应用，可通过name来自定义前缀，或move-class手动设置

3、列表交错过渡：data属性与js通信来实现

4、可复用的过渡：将transition或者transition-group作为根组件，将任何子组件放在其中即可

六、动态过渡

对于数据元素本身，如数字和运算、颜色、SVG节点位置，元素属性，可以转换为数字，就能实现切换元素的过渡状态

通常用name特性来绑定动态值。

通过侦听器能够侦听到任何数字属性的数值更新。

可以把过渡放在组件中