vue Transition

vue Transition

Vue 提供了两个内置组件，可以帮助你制作基于状态变化的过渡和动画：

• <Transition> 会在一个元素或组件进入和离开 DOM 时应用动画。
• <TransitionGroup> 用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。

Transition

<Transition> 是一个内置组件，这意味着它在任意别的组件中都可以被使用，无需注册,并且不会额外渲染DOM元素。它可以将进入和离开动画应用到通过默认插槽传递给它的元素或组件上。进入或离开可以由以下的条件之一触发：

• 由 v-if 所触发的切换

• 由 v-show 所触发的切换

• 由特殊元素 <component> 切换的动态组件

  transition属性及事件

属性	说明	类型	默认值
name	用于生成 CSS 过渡类名前缀。例如：name: ‘fade’ 将自动拓展为 .fade-enter，.fade-enter-active 等。	string	v
appear	是否在初始渲染时使用过渡	boolean	FALSE
type	指定过渡事件类型，侦听过渡何时结束。有效值为 ‘transition’ 和 ‘animation’；默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。	string
mode	控制离开/进入过渡的时间序列。有效的模式有 “out-in” 和 “in-out”；	string	同时进行
duration	number类型或对象类型：{ enter: number, leave: number } ，用来指定过渡的持续时间。	number、object
自定义类名	enter-from-class, enter-to-class, enter-active-class; leave-from-class, leave-to-class, leave-active-class; appear-from-class, appear-to-class, appear-active-class;
事件	before-enter,before-leave,before-appear,enter,leave,appear,after-enter,after-leave,after-appear,enter-cancelled,leave-cancelled,appear-cancelled

使用css方式

为过渡效果命名（name 属性,name也可以是动态的）

​ transition组件有6个应用于进入与离开过渡效果的css class.

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZvHloP6f-1675071253415)(C:\Users\v_jiyongli\AppData\Roaming\Typora\typora-user-images\1661219792558.png)]
1. v-enter-from：进入动画的起始状态。
2. v-enter-active：进入动画的生效状态。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
3. v-enter-to：进入动画的结束状态。
4. v-leave-from：离开动画的起始状态。
5. v-leave-active：离开动画的生效状态。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
6. v-leave-to：离开动画的结束状态。

<Transition :name='demo'>
  <p v-if="show">{{ msg }}</p>
</Transition>

.demo-enter-active {
  transition: all 0.3s ease-out;
}
.demo-leave-active {
  transition: all 0.8s ease-out;
}
.demo-enter-from,
.demo-leave-to {
  transform: translateX(20px);
  opacity: 0;
}

自定义过渡class

也可以向 <Transition> 传递以下的 props 来指定自定义的过渡 class：

1. enter-from-class, enter-to-class, enter-active-class;
2. leave-from-class, leave-to-class, leave-active-class;
3. appear-from-class, appear-to-class, appear-active-class；

传入的这些 class 会覆盖相应阶段的默认 class 名。这个功能在你想要在 Vue 的动画机制下集成其他的第三方 CSS 动画库(animate.css)时非常有用

<Transition
  name="demo"
  enter-active-class="animate__animated animate__bounceInRight demo-enter"
  leave-active-class="animate__animated animate__bounceOutRight demo-leave"
>
  <p v-if="show">{{ msg }}</p>
</Transition>

使用js方式

可以通过监听 <Transition> 组件事件的方式在过渡过程中挂上钩子函数：

<Transition
  :css="false"
  @before-enter="onBeforeEnter"   //在元素被插入到 DOM 之前被调用
  @enter="onEnter"   // 在元素被插入到 DOM 之后的下一帧被调用
  @after-enter="onAfterEnter"    // 当进入过渡完成时调用
  @enter-cancelled="onEnterCancelled"  // 取消进入过渡
            
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
</Transition>
// 它们都有el参数，其中enter和leave有第二个参数done 调用done()表示过渡结束

const onBeforeEnter = (el) => {
    el.style.color = 'red';
}

在使用仅由 JavaScript 执行的动画时，最好添加 :css=“false” 。这显式地向 Vue 表明可以跳过对 CSS 过渡的自动探测。除了性能稍好一些之外，还可以防止 CSS 规则意外地干扰过渡效果。

！！！也可以和第三方js动画库结合使用

Transition-group

<Transition-group>是一个内置组件，用于对 v-for 列表中的元素或组件的插入、移除和顺序改变添加动画效果。 有着和<Transition>基本相同的props、css过渡类和js钩子函数；

1. 和Transition的区别？
   • 默认情况下，它不会渲染一个容器元素。但你可以通过传入 tag prop 来指定一个元素作为容器元素来渲染。
   • 过渡模式（mode）在这里不可用，因为我们不再是在互斥的元素之间进行切换。
   • 列表中的每个元素都必须有一个独一无二的 key 属性。
   • CSS 过渡 class 会被应用在列表内的元素上，而不是容器元素上

<TransitionGroup name="list" tag="div">
    <span v-for="item in items" :key="item">
        {{ item }}
    </span>
</TransitionGroup>
<button @click="handleRemove">移除</button>
<button @click="handleAdd">添加</button>

.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}