从入门到项目实战 - vue 中使用动画技术

简介: 从入门到项目实战 - vue 中使用动画技术

vue 中使用动画技术


1. vue 中的相关基础知识

1.1 处理过渡和动画的内置组件

组件名 描述
Transition 用于在元素或组件进入离开 DOM 时应用动画。
TransitionGroup 用于在将元素组件插入列表从列表删除在v-for列表中移动 时应用动画。

1.1.1 Transition

作为VUE内置组件,可以在任何VUE组件的模板中使用,而无需注册它。

1.1.1.1 Transition 的触发方式
1) 通过条件渲染 (v-if);
2) 通过条件显示 (v-show
3) 通过特殊元素切换动态组件(<component>
4) 通过路由切换:需要 VueRouter 中 <router-view> 的 v-slot API。

CSS类名 描述
v-enter-from 进入的起始状态。在元素插入之前添加,在元素插入后一帧移除。
v-enter-active 进入的活动状态。在整个进入阶段应用。在插入元素之前添加,在过渡/动画完成时移除。此类可用于定义进入过渡的持续时间、延迟和缓动曲线。
v-enter-to 进入的结束状态。在元素插入后添加一帧(同时v-enter-from被移除),在过渡/动画完成时移除。
v-leave-from 休假的开始状态。触发离开过渡时立即添加,一帧后删除。
v-leave-active 休假的活动状态。在整个离开阶段应用。在触发离开过渡时立即添加,在过渡/动画完成时删除。此类可用于定义离开过渡的持续时间、延迟和缓动曲线。
v-leave-to 休假的结束状态。在触发离开过渡后添加一帧(同时v-leave-from删除),在过渡/动画完成时删除。
v-enter-activev-leave-active让我们能够为进入/离开过渡指定不同的缓动曲线。

例如:

<template>
<button @click="show = !show"> {{show}}</button>
<transition>
  <h1 :class="{
    animate__animated:true, 
    animate__fadeIn:show,
    animate__fadeOut:!show,
  }"
  >一段淡入淡出的动画文字。
  </h1>
</transition>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup(){
    return {
      show: ref(true)
    }
  }
});
</script>
<style>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
1.1.1.2 Transition 的 name 属性

我们可以指定transition名(name属性),则以上类名中的v将被替换成对应的transition名。上例中,可以改为:

<template>
<button @click="show = !show"> {{show}}</button>
<transition name="fade">
  <h1 :class="{
    animate__animated:true, 
    animate__fadeIn:show,
    animate__fadeOut:!show,
  }"
  >一段淡入淡出的动画文字。
  </h1>
</transition>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup(){
    return {
      show: ref(true)
    }
  }
});
</script>
<style>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>

可以看到,这里对应的CSS类名也都由v变成了fade,如.v-enter-active变成了.fade-enter-active,这里的效果还是一样的,只是为了我们控制页面上的多个动画元素时用以区别。

1.1.1.3 自定义 Transition 类

自定义 Transition 类对于开发者来说是非常友好的,因为很多时候使用形如v-enter-from这种格式的CSS类名容易限制我们的开发。尤其当我们使用第三方的CSS库的时候,我们大概率没有办法更改该第三方库提供的类名,需要将这些动画类于vue提供的类名做对应1.1.1.3 自定义 Transition 类解决的就是这个问题。

这里我们使用了一个第三方动画库Animate.css,将在后面有详细地介绍。

<template>
  <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>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import 'animate.css';
export default defineComponent({});
</script>

可以理解,这里我们将enter-active-class对应了animate__animatedanimate__tada两个类,leave-active-class对应了animate__animatedanimate__bounceOutRight两个类。其中enter-active-class也就相当于之前的.v-enter-activeleave-active-class也就相当于v-leave-active。我们可以定义的属性有如下:

  • enter-from-class,相当于以前单个类名v-enter-from所描述的样式
  • enter-active-class,相当于以前单个类名v-enter-active所描述的样式
  • enter-to-class,相当于以前单个类名v-enter-to所描述的样式
  • leave-from-class,相当于以前单个类名v-leave-from所描述的样式
  • leave-active-class,相当于以前单个类名v-leave-active所描述的样式
  • leave-to-class,相当于以前单个类名v-leave-to所描述的样式

有时

1.1.1.4 Transitions 和 Animations 一起使用

Vue 需要附加事件监听器(watch)才能知道转换何时结束。它可以是 transitionend 或 animationend,具体取决于所应用的 CSS 规则的类型。如果您只使用其中一种,Vue 可以自动检测正确的类型。

但是,在某些情况下,您可能希望将两者都放在同一个元素上,例如让 Vue 触发 CSS 动画,以及悬停时的 CSS 过渡效果。在这些情况下,您必须通过传递 prop 来显式声明您希望 Vue 关心的类型type,其值为animation 或者 transition:

<Transition type="animation">...</Transition>
1.1.1.5 嵌套转换和显式转换持续时间

虽然过渡类只应用于<Transition>中的直接子元素,但我们可以使用嵌套 CSS 选择器来过渡嵌套元素:

<Transition name="nested">
  <div v-if="show" class="outer">
    <div class="inner">
      Hello
    </div>
  </div>
</Transition>
/* rules that target nested elements */
.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;
}

我们甚至可以在 enter 的嵌套元素中添加一个过渡延迟,从而创建一个交错的 enter 动画序列:

/* delay enter of nested element for staggered effect */
.nested-enter-active .inner {
  transition-delay: 0.25s;
}

但是,这会产生一个小问题。默认情况下,<Transition>组件尝试通过侦听根过渡元素上的第一个transitionendanimationend事件来自动确定过渡何时完成。对于嵌套转换,所需的行为应该等待所有内部元素的转换完成。

在这种情况下,您可以使用<transition>组件上的 duration prop 指定显式转换持续时间(以毫秒为单位)。总持续时间应与内部元素的延迟加上过渡持续时间相匹配:

<Transition :duration="550">...</Transition>
1.1.1.6 为<Transition>使用JavaScript 钩子

可以通过侦听组件上的事件来使用 JavaScript 挂钩到转换过程<Transition>

<Transition
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
<!-- ... -->
</Transition>
export default {
  // ...
  methods: {
    // 在元素插入到DOM之前调用。
    // 用它来设置元素的“enter-from”状态
    onBeforeEnter(el) {},
    // 插入元素后一帧调用。
    // 用它来开始动画。
    onEnter(el, done) {
      // 调用done回调来指示transition结束
      // 如果与CSS结合使用,则可选
      done()
    },
    // 当进入 transition 完成时调用。
    onAfterEnter(el) {},
    onEnterCancelled(el) {},
    // 在离开钩子前调用
    // 大多数情况下,你应该使用离开钩子。
    onBeforeLeave(el) {},
    // 离开 transition 开始时调用。
    // 使用这个开始离开动画。
    onLeave(el, done) {
      // 调用done回调来指示 transition 结束
      // 如果与CSS结合使用,则可选
      done()
    },
    // 当离开 transition 完成并且元素已经从DOM中移除时调用。
    onAfterLeave(el) {},
    // 当且仅当使用 v-show transitions 时有效
    leaveCancelled(el) {}
  }
}

这些钩子可以与 CSS 过渡/动画结合使用,也可以单独使用。使用:css="false",我们还完全负责控制过渡何时结束。在这种情况下,@enter@leave钩子完成需要回调。否则,钩子将被同步调用,转换将立即完成。

1.1.2 TransitionGroup

作为VUE内置组件,可以在任何VUE组件的模板中使用,而无需注册它。

TransitionGroup 专用于为列表中呈现的元素或组件的插入、删除和顺序更改设置动画,支持与 Transition 相同的 props、CSS 转换类和 JavaScript 钩子侦听器 。

默认情况下,不渲染包装 DOM 元素,但可以通过 tag 属性 定义。

<TransitionGroup tag="ul" name="slide">
  <li v-for="item in items" :key="item.id">
    {{ item.text }}
  </li>
</TransitionGroup>

支持通过 CSS 变换移动过渡。当更新后孩子在屏幕上的位置发生变化时,它将应用一个移动的 CSS 类(从name属性自动生成或使用move-class道具配置)。如果在应用移动类时 CSS transform属性是“可转换的”,则元素将使用FLIP 技术平滑地动画到其目的地。

1.1.2.1 进入/离开过渡

下面是一个将进入/离开转换应用到v-for列表的示例:

<template>
<button @click="add()"> 添加 </button>
<button @click="pop()"> 删除 </button>
<TransitionGroup name="list" tag="ul">
  <li v-for="item in items" :key="item">
    {{ item }}
  </li>
</TransitionGroup>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
export default defineComponent({
  setup(){
    return {
      items: ref([1,2,3,4,5,6])
    }
  },
  methods:{
    add(){
      this.items.push(
        Math.round(Math.random()*10)
      )
    },
    pop(){
      this.items.pop()
    }
  }
});
</script>
<style lang="scss" scoped>
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
1.1.2.2 移动过渡

上面的演示有一些明显的缺陷:当一个项目被插入或移除时,它周围的项目会立即“跳”到位,而不是平稳地移动。我们可以通过添加一些额外的 CSS 规则来解决这个问题:

.list-move, /* 应用 transition 来移动元素 */
.list-enter-active,
.list-leave-active {
  transition: all 0.5s ease;
}
.list-enter-from,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
/* 确保离开项目从布局流中移除,以便可以正确计算移动动画。 */
.list-leave-active {
  position: absolute;
}
1.1.2.3 交错列表转换

通过数据属性与 JavaScript 进行通信,还可以在列表中交错转换。首先,我们将项目的索引渲染为 DOM 元素上的数据属性:

<TransitionGroup
  tag="ul"
  :css="false"
  @before-enter="onBeforeEnter"
  @enter="onEnter"
  @leave="onLeave"
>
  <li
    v-for="(item, index) in computedList"
    :key="item.msg"
    :data-index="index"
  >
    {{ item.msg }}
  </li>
</TransitionGroup>

然后,在 JavaScript 钩子中,我们根据数据属性为元素设置一个延迟动画:

function onEnter(el, done) {
  gsap.to(el, {
    opacity: 1,
    height: '1.6em',
    delay: el.dataset.index * 0.15,
    onComplete: done
  })
}

1.2 在 Vue Router中使用 transition组件

<router-view> 的 v-slot

Vue Router v4.x(对应vue3) 中,<router-view> 暴露了一个 v-slot API,主要使用 和 组件来包裹你的路由组件。 transitionkeep-alive 组件必须通过 v-slot API 在 RouterView 内部使用,如:

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </transition>
</router-view>

其中, Component是要传递给 的 VNodes 是 prop。显然 router-view 中使用插槽时 v-slot 是用于接收对象的,Component 代表的就是需要加载的组件,这将传给内置组件<component>的is使用。除了接收需要渲染的组件外,还接收一个route对象,这个对象包含了对应于当前渲染的组件的路由信息。如:

<Suspense>
  <template #default>
    <router-view v-slot="{ Component, route }">
      <transition :name="route.meta.transition || 'fade'" mode="out-in">
        <keep-alive>
          <component
            :is="Component"
            :key="route.meta.usePathKey ? route.path : undefined"
          />
        </keep-alive>
      </transition>
    </router-view>
  </template>
  <template #fallback> Loading... </template>
</Suspense>

由于所有的导航,包括第一个导航,现在都是异步的,这意味着,如果你使用一个 transition,你可能需要等待路由 ready 好后再挂载程序:

app.use(router)
// 注意:在服务器端,你需要手动跳转到初始地址。
router.isReady().then(() => app.mount('#app'))

否则会有一个初始过渡,就像你提供了 appear 属性到 transition 一样,因为路由会显示它的初始地址(什么都没有),然后显示第一个地址。

请注意,如果在初始导航时有导航守卫,你可能不想阻止程序渲染,直到它们被解析,除非你正在进行服务器端渲染。否则,在这种情况下,不等待路由准备好挂载应用会产生与 Vue2 中相同的结果。

2. 使用 Animate.css

Animate.css 是一个动画效果库,它提供了多种简单易用的CSS动画效果。

2.1 Animate.css 基本使用

2.1.1 安装

npm install animate.css --save

或者

yarn add animate.css

2.1.2 在vue3中基本使用方式

<template>
  <h1 class="animate__animated animate__bounce ">一段跳动的动画文字。</h1>
</template>
<script lang="ts">
import 'animate.css';
import { defineComponent, } from 'vue';
export default defineComponent({})
</script>

2.1.3 动画时间的控制

2.1.3.1 使用预定义延时类

Animate.css 提供了延时类,因此我们也可以直接在元素的 class 属性上添加延迟:

类名 默认延迟时间
animate__delay-2s 2s
animate__delay-3s 3s
animate__delay-4s 4s
animate__delay-5s 5s

Animate.css 使用自定义属性(也称为 CSS 变量)来定义动画的持续时间、延迟和迭代。这使得 Animate.css 非常灵活和可定制。需要更改动画持续时间时,只需在全局或本地设置一个新值:

  • 这只会改变这个特定的动画持续时间:
<style lang="scss" scoped>
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}
</style>
  • 这将全局更改所有动画:
<style lang="scss" scoped>
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
</style>
2.1.3.2 使用 keyframes 中的animation-duration

尽管该库提供了一些帮助类,例如animated让您快速运行的类,但您可以直接使用提供的动画keyframes。

<template>
  <h1 class="my-element">一段跳动的动画文字。</h1>
</template>
<script lang="ts">
import 'animate.css';
import { defineComponent, } from 'vue';
export default defineComponent({})
</script>
<style scropd>
.my-element {
  display: inline-block;
  margin: 0 0.5rem;
  animation: bounce;      /* 直接引用动画的 @keyframe 声明 */
  animation-duration: 2s; /* 别忘了设置时长! */
}
</style>
2.1.3.3 使用JavaScript控制延时

自定义属性还可以轻松地动态更改所有动画的时间受限属性。这意味着您可以使用 javascript one-liner 获得慢动作或延时效果:

  • 所有动画将花费两倍的时间来完成:
document.documentElement.style.setProperty('--animate-duration', '2s');
  • 所有动画将花费一半的时间来完成:
document.documentElement.style.setProperty('--animate-duration', '.5s');

当写在VUE中,你不应该写在 setup 中,因为这是在构建组件前的配置。通常你可以根据需要在以下钩子中使用:

  • beforeCreate(在实例初始化之后、进行数据侦听和事件/侦听器的配置之前);
  • created(在实例创建完成后);
  • mounted(在实例挂载完成后) ;

比如在一个组件中完整看起来是这样写:

<template>
  <h1 class="animate__animated animate__bounce ">一段跳动的动画文字。</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import 'animate.css';
export default defineComponent({
  beforeMount(){
    // 所有动画将花费两倍的时间来完成
    document.documentElement.style.setProperty('--animate-duration', '.1s');
  }
});
</script>

2.1.4 动画的重复

Animate.css 提供了重复类,因此我们也可以直接在元素的 class 属性上添加重复:

类名 默认延迟时间
animate__repeat-1 1
animate__repeat-2 2
animate__repeat-3 3
animate__infinite infinite

例如:

<!-- 重复2次 -->
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>

2.2 Animate.css 的动画(CSS)类名

2.2.1 引起关注(Attention seekers)

类名 描述 说明
animate__bounce 弹跳 重复几次的上下跳动的动画效果
animate__flash 闪光 重复几次的隐藏又显示的动画效果
animate__pulse 脉冲 一次稍微变大又缩小会原来尺寸的效果
animate__rubberBand 橡皮筋 像同时往左右拉伸橡皮经一样的动画
animate__shakeX X轴摇晃 反复左右平移几次
animate__shakeY Y轴摇晃 反复上下平移几次
animate__headShake 摇头 轻轻地左右平移几次,就像摇头
animate__swing 摇摆 绕着上方一个点按弧形摇摆
animate__tada - 略微缩小同时逆时针旋转一个小角度后还原,然后绕中心轻微摇摆几次
animate__wobble 摇晃 大幅度大半径按下方圆心的圆弧轨迹摇晃
animate__jello 果冻 就像果冻落地一小段时间内的形变过程动画
animate__heartBeat 心跳 几次放大放小的动画,就像心跳一样

2.2.2 后入(Back entrances)

类名 描述 说明
animate__backInDown 向下后入 从上掉下的进入动画
animate__backInLeft 从左后入 从左向右的进入动画
animate__backInRight 从右后入 从右向左的进入动画
animate__backInUp 向上后入 从下向上的进入动画

2.2.3 后出(Back exits)

类名 描述 说明
animate__backOutDown 向下后出 从上掉下的移出动画
animate__backOutLeft 向左后出 从原地退后向右的移出动画
animate__backOutRight 向右后出 从原地退后右向左的移出动画
animate__backOutUp 向上后出 从原地退后向上的移出动画

2.2.4 弹入(Bouncing entrances)

类名 描述 说明
animate__bounceIn 弹入 从原地弹入动画
animate__bounceInDown 弹入 从上向下弹入动画
animate__bounceInLeft 弹入 从左向右弹入动画
animate__bounceInUp 弹入 从右向左弹入动画

2.2.5 弹出(Bouncing exits)

类名 描述 说明
animate__bounceOut - 略微缩小后向内移出
animate__bounceOutDown - 略微缩小后向下移出
animate__bounceOutLeft - 略微缩小后向左移出
animate__bounceOutRight - 略微缩小后向右移出
animate__bounceOutUp - 略微缩小后向上移出

2.2.6 淡入(Fading entrances)

类名 描述 说明
animate__fadeIn 渐显 淡入,即逐渐显示
animate__fadeInDown 渐显-下 从上向下淡入
animate__fadeInDownBig 渐显-下&大 从上向下淡入,更大的动画幅度
animate__fadeInLeft 渐显-左 从左向右淡入
animate__fadeInLeftBig 渐显-左&大 从左向右淡入,更大的动画幅度
animate__fadeInRight 渐显-右
animate__fadeInRightBig 渐显-右&大 更大的动画幅度
animate__fadeInUp 渐显-上 更大的动画幅度
animate__fadeInUpBig 渐显-上&大
animate__fadeInTopLeft 渐显-左上
animate__fadeInTopRight 渐显-左上&大 更大的动画幅度
animate__fadeInBottomLeft 渐显-左下
animate__fadeInBottomRight 渐显-左&大 更大的动画幅度

2.2.7 淡出(Fading exits)

类名 描述 说明
animate__fadeOut 淡出 变淡找到消失
animate__fadeOutDown 下淡出 由上向下淡出
animate__fadeOutDownBig 下淡出-大 由上向下淡出,动作幅度更大
animate__fadeOutLeft 左淡出 从左向右淡出
animate__fadeOutLeftBig 左淡出-大 从左向右淡出,动作幅度更大
animate__fadeOutRight 右淡出 从右向左淡出
animate__fadeOutRightBig 右淡出-大 从右向左淡出,动作幅度更大
animate__fadeOutUp 上淡出 由下向上淡出
animate__fadeOutUpBig 上淡出-大 由下向上淡出,动作幅度更大
animate__fadeOutTopLeft 左上方淡出 -
animate__fadeOutTopRight 右上方淡出 -
animate__fadeOutBottomRight 左下方淡出 -
animate__fadeOutBottomLeft 右下方淡出 -

2.2.8 后空翻(Flippers)

类名 描述 说明
animate__flip 后空翻 (为默认的Y轴)
animate__flipInX 绕X轴后空翻 以元素横中轴线上下翻动
animate__flipInY 绕Y轴后空翻 以元素纵中轴线上下翻动
animate__flipOutX 绕X轴后空翻 animate__flipInX旋转方向相反
animate__flipOutY 绕Y轴后空翻 animate__flipInY旋转方向相反

2.2.9 光速(Lightspeed)

类名 描述 说明
animate__lightSpeedInRight - 从右向左进入
animate__lightSpeedInLeft - 从左向右进入
animate__lightSpeedOutRight - 向右移出
animate__lightSpeedOutLeft - 向左移出

2.2.10 旋转进入(Rotating entrances)

类名 描述 说明
animate__rotateIn 旋转进入 (逆时针)
animate__rotateInDownLeft - 从零点处顺时针90°旋转进入
animate__rotateInDownRight - 从零点处逆时针90°旋转进入
animate__rotateInUpLeft - 从6点处逆时针90°旋转进入
animate__rotateInUpRight - 从6点处顺时针90°旋转进入

2.2.11 旋转退出(Rotating exits)

类名 描述 说明
animate__rotateOut 旋转退出 (顺时针)
animate__rotateOutDownLeft - 3点向6点顺时针旋转退出
animate__rotateOutDownRight - 9点向6点逆时针旋转退出
animate__rotateOutUpLeft - 3点向12点逆时针旋转退出
animate__rotateOutUpRight - 9点向12点顺时针旋转退出

2.2.12 缩放进入(Zooming entrances)

类名 描述 说明
animate__zoomIn - 由中心点方法进入
animate__zoomInDown - 由上方一个小点放大掉入
animate__zoomInLeft - 从左向右放大进入
animate__zoomInRight - 从右向左放大进入
animate__zoomInUp - 从下向上放大进入

2.2.13 缩放退出(Zooming exits)

类名 描述 说明
animate__zoomOut - 向中心一点缩小退出
animate__zoomOutDown - 缩小到一定尺寸后,向下退出
animate__zoomOutLeft - 缩小到一定尺寸后,向左退出
animate__zoomOutRight - 缩小到一定尺寸后,向右退出
animate__zoomOutUp - 缩小到一定尺寸后,向上退出

2.2.14 滑入(Sliding entrances)

类名 描述 说明
animate__slideInDown 下滑入 向下滑入
animate__slideInLeft 左滑入 从左滑入
animate__slideInRight 右滑入 从右滑入
animate__slideInUp 上滑入 向上滑入

2.2.15 滑出(Sliding exits)

类名 描述 说明
animate__slideOutDown 下滑出 向下滑出
animate__slideOutLeft 左滑出 从左滑出
animate__slideOutRight 右滑出 从右滑出
animate__slideOutUp 上滑出 向上滑出

2.2.16 特殊动画(Specials)

类名 描述 说明
animate__hinge - 左侧端点为圆心挂住,右侧绕圆弧下垂,最后整体落体
animate__jackInTheBox - 一种旋转进入的效果
animate__rollIn - 一种大幅度从左侧翻滚进入的效果
animate__rollOut - 一种大幅度向右侧翻滚退出的效果

2.3 与vue内置组件 Transition 一起使用

在上文中我们介绍过 自定义 Transition 类,这也是使用的一种简单方法:

<template>
  <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>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import 'animate.css';
export default defineComponent({});
</script>

实际上,为了实现动画效果,有些情况下 Transition 不是必须的。比如在使用 VUERouter时,可以直接将动画CSS绑定到router-view上,如:

<router-view :class="{
  'jcadmin-childPage':true,
  'animate__animated': true,
  'animate__zoomInDown': true,
  'animate__zoomOutDown': false,
}" >
</router-view>

但是这要求当路由变化时,路由渲染了不同的组件。在某些情况下我们可能传入了不同路由相同组件,这种做法比较特殊,因为在VueRouter中的不同路由传入相同的组件作为视图时,他们将获得相同的scopID(用于渲染只属于当前组件的样式)、hmrID(用于热模块重载)等等,不会被VUE视作不同模块,因此可能通过props传入特定参数来最终显示不同的视图。

目录
相关文章
|
2天前
|
JavaScript
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
Ant design Vue 父子组件传递(代码案例--不懂的地方可以私信本博主)
8 0
|
2天前
|
JavaScript 前端开发
ant design vue 配置菜单外部打开
ant design vue 配置菜单外部打开
6 0
|
2天前
|
JavaScript
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
ant design vue 在列表中使用插槽 例如当性别为0的时候在列表中我想显示男
6 0
|
2天前
|
JavaScript 前端开发
vue 实现在线预览PDFpdf文件
vue 实现在线预览PDFpdf文件
12 0
|
2天前
|
JavaScript
vue下拉列表
vue下拉列表
5 0
vue下拉列表
|
2天前
|
JavaScript 前端开发 API
vue与jqyery的区别
vue与jqyery的区别
|
3天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
5 0
|
4天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
6 0
|
5天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
5天前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
12 0