VUE3-内置组件

Transition标签

• 一个元素或组件进入和离开 DOM 时应用动画

• 触发条件：

  • 由 v-if 所触发的切换
  • 由 v-show 所触发的切换
  • 由特殊元素 <component> 切换的动态组件

• 基于侦听器的动画

import gsap from 'gsap'
export default {
  data() {
    return {
      number: 0,
      tweened: 0
    }
  },
  watch: {
    number(n) {
      gsap.to(this, { duration: 0.5, tweened: Number(n) || 0 })
    }
  }
}

Type a number: <input v-model.number="number" />
<p>{{ tweened.toFixed(0) }}</p>

• 基于 CSS 的过渡效果

  • v-enter-from: 进入动画的起始状态
  • v-enter-active： 进入动画的生效状态
  • v-enter-to：进入动画的结束状态
  • v-leave-from： 离开动画的起始状态
  • v-leave-active：离开动画的生效状态
  • v-leave-to：离开动画的结束状态
    

• 为过渡效果命名 — 给 Transition 上添加name属性

  • <Transition name="fade">...</Transition>
  • 样式 .fade-enter-from

• CSS 的 transition

  • transition：执行动画的属性 持续时间 速度曲线

• CSS 的 animation

  • *-enter-from 不是在元素插入后立即移除，而是在一个 animationend 事件触发时被移除

    .bounce-enter-active {
      animation: bounce-in 0.5s;
    }
    .bounce-leave-active {
      animation: bounce-in 0.5s reverse;
    }
    @keyframes bounce-in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.25);
      }
      100% {
        transform: scale(1);
      }
    }

• 自定义过渡 class — 使用覆盖默认class

  • enter-from-class
  • enter-active-class
  • enter-to-class
  • leave-from-class
  • leave-active-class
  • leave-to-class

    // 假设你已经在页面中引入了 Animate.css
    <Transition
      name="custom-classes"
      enter-active-class="animate__animated animate__tada"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <p v-if="show">hello</p>
    </Transition>

• 同时使用 transition 和 animation 传type

• 深层级过渡与显式过渡时长

<Transition name="nested" :duration="550">
// duration = 内部过渡时间+匹配延迟时间
  <div v-if="show" class="outer">
    <div class="inner">
      Hello
    </div>
  </div>
</Transition>

/* 应用于嵌套元素的规则 */
.nested-enter-active .inner,
.nested-leave-active .inner {
  transition: all 0.3s ease-in-out;
}

.nested-enter-from .inner,
.nested-leave-to .inner {
  transform: translateX(30px);
  opacity: 0;
}

• 可以被监听、可复用（插槽）、可动态

• 初次渲染时应用一个过渡效果 添加appear属性

• 元素间的过渡: 用v-if家族，

• 过渡模式：mode=”out-in” — 等上一个元素离开后执行

TransitionGroup标签

• 一个 v-for 列表中的元素或组件被插入，移动，或移除时应用动画。
• tag?：指明渲染的片段

KeepAlive

• 在多个组件间动态切换时缓存被移除的组件实例

  <component :is="activeComponent" /> // 动态组件，切换会重置状态
  <KeepAlive> 
    <component :is="activeComponent"> 
  </KeepAlive> // 切换时缓存切换前的状态，不会重置

• 包含include/排除exclude，最大缓存实例数max

  • 指明（不）缓存那个组件，以组件的参数name匹配

• 生命周期钩子

  • 当一个组件在 中被切换时，它的 activated 和 deactivated 生命周期钩子将被调用，用来替代 mounted 和 unmounted。

Teleport

• 一个组件模板的一部分在逻辑上从属于该组件，但从整个应用视图的角度来看，它在 DOM 中应该被渲染在整个 Vue 应用外部的其他地方。

• 如全屏的模态框

• 多个 组件可以将其内容挂载在同一个目标元素

  • 顺序： 从上往下，后挂载的将排在目标元素下更后面的位置上

• 属性 to — 指定渲染到那个元素/容器

• 属性 disabled — 禁用，不渲染到外层容器/元素