Vue动画

Vue中的动画

CSS 过渡

1.opacity属性指定了一个元素的透明度。
0 元素完全透明 (即元素不可见)
1 元素完全不透明(即元素后面的背景不可见)

2.transition CSS 属性是 transition-property，transition-duration，transition-timing-function 和 transition-delay 的一个简写属性。
transition-property：
指定哪个或哪些 CSS 属性用于过渡。只有指定的属性才会在过渡中发生动画，其它属性仍如通常那样瞬间变化。
transition-duration：
指定过渡的时长。或者为所有属性指定一个值，或者指定多个值，为每个属性指定不同的时长。
transition-timing-function：
指定一个函数，定义属性值怎么变化。缓动函数 Timing functions 定义属性如何计算。https://easings.net/可以选择缓动效果
transition-delay：
指定延迟，即属性开始变化时与过渡开始发生时之间的时长。

CSS 动画

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

Vue 提供了 transition 的封装组件
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

使用 :duration=“毫秒值” 来统一设置 入场 和 离场 时候的动画时长
使用 :duration="{ enter: 200, leave: 400 }" 来分别设置 入场的时长 和 离场的时长

  <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
  <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
  <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
  <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
  <transition-group appear tag="ul">
    <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
      {{item.id}} --- {{item.name}}
    </li>
  </transition-group>

列表的排序过渡

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。

• v-move 和 v-leave-active 结合使用，能够让列表的过渡更加平缓柔和：

.v-move{
  transition: all 0.8s ease;
}
.v-leave-active{
  position: absolute;
}