vue3之transition动画组件

最新推荐文章于 2024-08-24 17:31:28 发布

m0_67402096

最新推荐文章于 2024-08-24 17:31:28 发布

阅读量602

点赞数 2

分类专栏： java 后端文章标签：动画 css3 前端

本文链接：https://blog.csdn.net/m0_67402096/article/details/123524886

版权

java 同时被 2 个专栏收录

278 篇文章 8 订阅

订阅专栏

后端

11 篇文章 0 订阅

订阅专栏

vue3之transition动画组件

    <transition name="fade">
      <div v-if="flag2" class="box">我是动画啊</div>
    </transition>

动画组件
就是使用 transition 组件，然后使用 name的定义传递进入组件动画的类名等样式
触发机制
- v-if
- v-show
- 动态组件等
过渡的类名
- 再进入与离开这个阶段之中，涉及到6个class类名的操作（eg: 再过度组件之中 name=“fade” 设置为 fade ，那么其类名则是以 .fade-enter-from等类似 fade开头）
- v-enter-from：定义进入过渡的开始状态。
- v-enter-active：定义进入过渡时，这个过程生效的状态。定义一些曲线、延迟等。
- v-enter-to：定义进入过渡的结束状态。
- v-leave-from：定义离开过渡的开始状态。
- v-leave-active：定义离开过渡时，这个过程生效的状态。
- v-leave-to：离开过渡的结束状态。

一个简单的过度效果淡入淡出

<template>
  <div class="main">
    <!-- 动画组件 -->
    <button @click="flag2 = !flag2">切换动画</button>
    <transition name="fade">
      <div v-if="flag2" class="box">我是动画啊</div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
let flag2 = ref<Boolean>(true)
</script>
<style lang="scss" scoped>
.main {
  flex: 1;
  margin: 14px;
  border: 1px solid #ccc;
  overflow: auto;
  .box {
    width: 100px;
    height: 100px;
    background: red;
  }
  // 进入前
  .fade-enter-from {
    width: 0;
    height: 0;
    opacity: 0;
  }
  // 进入的这个阶段
  .fade-enter-active {
    transition: all 2s ease;
  }
  // 进入后
  .fade-enter-to {
    width: 100px;
    height: 100px;
    opacity: 1;
  }
  // 离开前
  .fade-leave-from {
    width: 100px;
    height: 100px;
    opacity: 1;
  }
  // 进入的这个阶段
  .fade-leave-active {
    transition: all 2s ease;
  }
  // 离开后
  .fade-leave-to {
    width: 0;
    height: 0;
    opacity: 0;
  }
}
</style>

效果

自定义过度动画的类名

enter-from-class、enter-active-class、enter-to-class、leave-from-class、leave-active-class、leave-to-class
以上这6个类名可以重新自定义类名
实现的效果入简单的fade一致

transition的生命周期

@before-enter => 就是动画进入之前触发
@enter => 就是动画在运行过程中的曲线等
@after-enter => 就是动画执行完毕触发
@enter-cancelled => 动画被效果打断
@before-leave => 动画离开前触发
@leave=“leave” => 就是动画在离开时，运行过程中的曲线等
@after-leave => 动画离开完毕触发
@leave-cancelled => 动画被效果打断

配合 gsap 的使用

下载：yarn add gsap -S
官网：gsap

借组gsap 实现一个很丝滑的动画

效果：就是从最开始的宽高100，丝滑得缩小为0，然后显示的时候，从0到100

transition 结合 animate动画库

animate官网

下载使用
- yarn add animate.css -S

一个简单的

离开时从右侧划来，进入时从左侧划出

transition结合 gsap动画库

gsap官网

transition-group过度列表

就是对一个列表的操作时，
- 若是新增一个数组数据，也就是数组新增就是触发进入动画(从左侧移到最末尾的位置，新增了一个数据)
- 删除数组时，也就是触发离开动画(从当前最末尾位置，慢慢移除，并且删除掉改数据)

transition-group 结合 lodash 实现一个九方格随机数

实现一个81宫格的随机数切换动画
lodash官网
- lodash
下载：
- yarn add lodash -S
- yarn add @type/lodash -D

数字状态的过度

数字状态的过度，比如说就是一个input框之中输入了一个值为10，那么监听这个input输入的值发生变化时候，触发另外一个状态过度的数据
num
- curNum 输入框监听的值
- tweenedNumber 状态过度的值，数字的抖动值
数字的过度效果 {{ parseInt(num.tweenedNumber).toFixed(0) }}