vue中的动画组件使用及如何在vue中使用animate.css

news2024/11/27 20:59:19

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

由 v-if 所触发的切换
由 v-show 所触发的切换
由特殊元素切换的动态组件
改变特殊的 key 属性
官方文档链接:https://cn.vuejs.org/guide/built-ins/transition.html

以下是一个简单的demo

<template>
 <div style="margin-top: 200px;margin-left: 200px;">
    <div>
      <button @click="show = !show">切换动画</button>
    </div>
    <div>
      <Transition name="fade">
        <p v-show="show">测试动画</p>
      </Transition>
  </div>
 </div>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue'
let show = ref<Boolean>(true);
</script>

<style scoped>
/* 开始过度 */
.fade-enter-from{
   background:red;
   width:0px;
   height:0px;
}
/* 过渡中 */
.fade-enter-active{
  transition: all 2.5s linear;
}
/* 过度完成 */
.fade-enter-to{
   background:yellow;
   width:200px;
   height:200px;
}
/* 离开的过度 */
.fade-leave-from{
  width:200px;
  height:200px;
  background:yellow;
}
/* 离开中过度 */
.fade-leave-active{
  transition: all 1s linear;
}
/* 离开完成 */
.fade-leave-to{
  background:skyblue;
  width:0px;
  height:0px;
}
</style>

效果如图所示

在这里插入图片描述

一共有 6 个应用于进入与离开过渡效果的 CSS class。

v-enter-from：进入动画的起始状态。在元素插入之前添加，在元素插入完成后的下一帧移除。
v-enter-active：进入动画的生效状态。应用于整个进入动画阶段。在元素被插入之前添加，在过渡或动画完成之后移除。这个 class 可以被用来定义进入动画的持续时间、延迟与速度曲线类型。
v-enter-to：进入动画的结束状态。在元素插入完成后的下一帧被添加 (也就是 v-enter-from 被移除的同时)，在过渡或动画完成之后移除。
v-leave-from：离开动画的起始状态。在离开过渡效果被触发时立即添加，在一帧后被移除。
v-leave-active：离开动画的生效状态。应用于整个离开动画阶段。在离开过渡效果被触发时立即添加，在过渡或动画完成之后移除。这个 class 可以被用来定义离开动画的持续时间、延迟与速度曲线类型。
v-leave-to：离开动画的结束状态。在一个离开动画被触发后的下一帧被添加 (也就是 v-leave-from 被移除的同时)，在过渡或动画完成之后移除。

使用vue使用animate.css动画

动画地址https://animate.style/
你也可以向 < Transition > 传递以下的 props 来指定自定义的过渡 class：

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

通过自定义class 结合css动画库animate css
安装库 npm install animate.css
引入 import ‘animate.css’
使用方法

<template>
 <div style="margin-top: 200px;margin-left: 200px;">
    <div>
      <button @click="show = !show">切换动画</button>
    </div>
    <div>
      <!-- <Transition name="fade">
        <p v-show="show">测试动画</p>
      </Transition> -->
      <transition
        leave-active-class="animate__animated animate__bounceInLeft"
        enter-active-class="animate__animated animate__bounceInRight"
      >
        <div v-if="show">测试动画</div>
      </transition>
  </div>
 </div>
</template>

<script setup lang="ts">
import { ref,watch } from 'vue'
let show = ref<Boolean>(true);
</script>

动画生命周期

利用这些动画生命周期钩子我们可以在动画执行的过程中做一些其他事情例如使用el-dialog弹窗时我们可以在弹窗动画开始的时候就可以获取数据了

<Transition
  @before-enter="onBeforeEnter" 
  @enter="onEnter"
  @after-enter="onAfterEnter"
  @enter-cancelled="onEnterCancelled"
  @before-leave="onBeforeLeave"
  @leave="onLeave"
  @after-leave="onAfterLeave"
  @leave-cancelled="onLeaveCancelled"
>
  <!-- ... -->
</Transition>
// 在元素被插入到 DOM 之前被调用
// 用这个来设置元素的 "enter-from" 状态
function onBeforeEnter(el) {}

// 在元素被插入到 DOM 之后的下一帧被调用
// 用这个来开始进入动画
function onEnter(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 当进入过渡完成时调用。
function onAfterEnter(el) {}

// 当进入过渡在完成之前被取消时调用
function onEnterCancelled(el) {}

// 在 leave 钩子之前调用
// 大多数时候，你应该只会用到 leave 钩子
function onBeforeLeave(el) {}

// 在离开过渡开始时调用
// 用这个来开始离开动画
function onLeave(el, done) {
  // 调用回调函数 done 表示过渡结束
  // 如果与 CSS 结合使用，则这个回调是可选参数
  done()
}

// 在离开过渡完成、
// 且元素已从 DOM 中移除时调用
function onAfterLeave(el) {}

// 仅在 v-show 过渡中可用
function onLeaveCancelled(el) {}