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

置顶 已于 2022-10-16 22:06:47 修改
阅读量4.5k 收藏 34
点赞数 10
分类专栏： css、sass 前端、桌面端、移动端、UI、构建工具 Vue 开发技术专题 文章标签： 动画 vue.js javascript
于 2022-02-13 16:54:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28550263/article/details/122892028
版权
vue 中使用动画技术
上一节：《vue2 与 vue3 中实现全局事件总线 》 | 下一节：《vue 的内置组件分析 》
jcLee95
邮箱 ：291148484@163.com
CSDN 主页：https://blog.csdn.net/qq_28550263?spm=1001.2101.3001.5343
本文地址：https://blog.csdn.net/qq_28550263/article/details/122892028
// TODO: 
// 增加 [animejs](#https://animejs.com/)、[Motion One](#https://motion.dev/) 结合vue trasition的用法

相关文章推荐：

目 录

1. vue 中的相关基础知识

2. 使用 Animate.css

2.3 与内置组件 Transition 一起使用

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-active与v-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__animated 和 animate__tada两个类，leave-active-class对应了animate__animated 和 animate__bounceOutRight两个类。其中enter-active-class也就相当于之前的.v-enter-active，leave-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>组件尝试通过侦听根过渡元素上的第一个transitionend或animationend事件来自动确定过渡何时完成。对于嵌套转换，所需的行为应该等待所有内部元素的转换完成。
在这种情况下，您可以使用<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，主要使用 和 组件来包裹你的路由组件。 transition 和 keep-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-2s2s
animate__delay-3s3s
animate__delay-4s4s
animate__delay-5s5s

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-11
animate__repeat-22
animate__repeat-33
animate__infiniteinfinite

例如：

<!-- 重复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__shakeXX轴摇晃反复左右平移几次
animate__shakeYY轴摇晃反复上下平移几次
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传入特定参数来最终显示不同的视图。

jcLee95
关注
  • 10
    点赞
  • 踩
  • 34
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
vue-motion：轻松自然的状态转换
02-06
VueMotion 轻松自然的状态转换 文献资料 查看和 npm install --save vue-motion 发展历程 npm run dev 执照 感谢@chenglou和所有对做出贡献的人，从这个项目中得到了启发。
VueMotion-轻松自然的状态转换
cuk5239的博客
07-24 2285
VueMotion (VueMotion) Vue Motion uses springs to generate smooth and natural transition between numerical values. This allows you to create smooth animations that feels natural and that automatically...
推荐开源项目：Vue-Anime - 动画与Vue.js的完美结合
gitblog_00006的博客
06-03 297
推荐开源项目：Vue-Anime - 动画与Vue.js的完美结合 项目地址:https://gitcode.com/BenAHammond/vue-anime 1、项目介绍 在寻找一种简单且强大的方式为你的Vue.js应用添加动画效果吗？那么Vue-Anime绝对值得你一试。这是一个专门为Vue.js设计的轻量级库，将出色的Anime.js绑定到Vue的指令和组件中，让你能够轻松地创建出各种复杂...
探秘Vue.js生态：Vue-Motion - 动画解决方案的新星
gitblog_00036的博客
04-27 448
探秘Vue.js生态：Vue-Motion - 动画解决方案的新星 项目地址:https://gitcode.com/posva/vue-motion 项目简介 Vue-Motion 是一个由知名Vue.js开发者@posva（即Vuetify的创建者）开发的动画库，它为Vue应用提供了一套优雅、流畅且可自定义的动画解决方案。基于Vue.js的响应式系统，Vue-Motion能够无缝集成到你的Vu...
探索VueUse Motion：下一代Vue.js动画框架
gitblog_00048的博客
03-24 837
探索VueUse Motion：下一代Vue.js动画框架 项目地址:https://gitcode.com/vueuse/motion VueUse Motion 是一个由VueUse团队打造的现代化、高性能的Vue.js动画库，它为Vue 3提供了一种优雅的方式来处理组件的状态变化和动效。这个项目的目的是让开发者能够更容易地创建流畅、动态且响应式的UI交互。 技术概览 VueUse Motio...
封装简易@vueuse/motion组件
weixin_46774564的博客
07-07 2041
封装@vueuse/motion组件
Vue.js 3.0从入门到实战【配套资源】.zip
06-24
这个压缩包“Vue.js 3.0从入门到实战【配套资源】.zip”包含了两个重要的子文件：书配套代码.zip和视频配套代码.zip，它们分别对应于学习Vue.js 3.0理论知识的书籍和实践操作的视频教程的源代码。 1. **Vue.js 3.0...
Vue-project:这是一个vue入门到项目实战开发的源代码集合
03-23
Vue-vue入门到项目实战开发 这是一个vue入门到项目实战开发的源代码集，包括以下代码（单独的文件夹下）：我的博客 Vue基础精讲 你好，世界待办事项清单vue1-实例vue2-实例的生命周期函数vue3-模板语法vue4-计算属性...
VUE.js高仿饿了么商城实战项目源码（未打包文件）
11-09
在这个"Vue.js高仿饿了么商城实战项目"中，你可以深入学习和实践如何利用Vue.js来构建复杂的Web应用程序，特别是电商类平台。项目未打包，这意味着你将有机会查看原始代码并理解其工作原理。 1. **Vue.js基础**：...
Vue.js前端开发实战-源代码.zip
07-07
2. **虚拟DOM**：Vue.js使用虚拟DOM技术来提高性能，它在内存中维护一个高效的表示层，当数据变化时，仅计算最小化的DOM更新，避免了频繁操作真实DOM导致的性能损耗。 3. **指令系统**：Vue.js提供了一系列内置指令...
30天从Vue入门到精通教程
08-10
【30天从Vue入门到精通教程】 本教程将带你逐步深入Vue的世界，通过30天的学习，你将从基础到进阶全面掌握Vue.js。这个过程分为多个阶段，从安装Vue开始，然后逐步了解其基本概念和语法，直到能够构建完整的项目。 ...
CSS3动画库motion-css
07-26
纯css3写的动画库 motion-css，里面有代码源码 也有实例 ；
玩转Vue3全家桶09丨动画：Vue中如何实现动画效果？
fegus的博客
10-02 2907
今天这一讲的主要内容讲完了，我们来简单复习一下今天学到的知识点。首先我们学习了前端使用 CSS 实现简单动画的 transition 和 animation 两个配置；然后，我们了解到了通过 Vue 3 提供的 traisition 组件，我们可以控制在 Vue 中动画元素进入和离开页面时候的 class；通过制定的命名规范，在 CSS 中设置过渡和动画效果，从而很方便地实现过渡效果，并且丰富了清单应用的弹窗功能；在这之后，我们使用 transition-group 实现列表元素的动画；
2023 年 Vue 最流行的动画库
Willin Wang 的全栈升级指南
09-11 1566
Vue.js 因其简单性和灵活性而广受欢迎。Vue.js 以其创建流畅且引人入胜的动画视觉效果的能力而闻名。除了 Vue.js 内置的动画功能外，Vue 动画库还允许您创建自定义动画。为什么我们需要 Vue 动画库？它是一个专门为 Vue.js 应用程序设计的动画组件库。使用此库，您的 Vue.js 应用程序可以轻松展示引人注目的动画，而无需编写复杂的 CSS 或 JavaScript 代码。借助 Vue 的动画库，可以创建各种令人惊叹的效果，包括淡入、幻灯片、弹跳等。
学习Vue3你需要知道的47个实用开源组件
猿小白的博客
10-27 1948
官网：https://sortablejs.github.io/vue.draggable.next/#/simple。官网：https://varlet.gitee.io/varlet-ui/#/zh-CN/home。官网：https://www.antdv.com/docs/vue/introduce-cn。官网：https://better-scroll.github.io/docs/zh-CN/官网：https://vant-contrib.gitee.io/vant/#/zh-CN。
anime在vue项目中的使用
yh8899abc的博客
09-01 3471
1、安装 npm install animejs -S 2、在项目中使用 import anime from 'animejs' watch: { listData() { this.listAnimate(); } } getResterListByParams(params, res => { const datalist = res.data.result; if (res.data.code == 200) { this.listData = dat
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本、Markdown，3D组件库】
热门推荐
程序员猫爪
11-29 2万+
Vue常用的组件库大全【前端工程师必备】【实时更新】【移动端、PC端（web端）、数据可视化组件库（数据大屏） 、动画组件库、文本编辑器，富文本Markdown，3D组件库】
【Anime.js】——JavaScript动画库：Anime.js——学习笔记
qq_50497708的博客
12-14 1万+
官网定义：anime.js 是一个简便的JS动画库，用法简单而且适用范围广，涵盖CSS，DOM，SVG还有JS的对象，各种带数值属性的东西都可以动起来。
【vueUse库Animation模块各函数简介及使用方法】
最新发布
xiejunlan的博客
06-27 941
vueUseAnimation函数useInterval 函数使用方法useIntervalFn 函数使用方法3.useNowuseNow 函数使用方法4.useRafFnuseRafFn 函数使用方法useTimeout 函数使用方法useTimeoutFn 函数使用方法useTimestamp 函数使用方法1. 函数概述2. 函数参数3. 返回值4. 使用方法步骤 1：安装和引入步骤 2：定义源状态和配置选项步骤 3：使用 useTransition 创建过渡步骤 4：在模板中使用过渡5. 注意事项。
Vue.js实战教程：从入门到精通
《Vue.js前端框架技术与实战》是一门面向计算机科学与技术、信息管理与信息系统、软件工程、网络工程、数字媒体技术及物联网工程等专业的专业或普及课程，旨在提升学生的前端开发能力，适应Web前端工程师的职业需求...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jcLee95

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值