TransX 是一个基于 Vue 3 的组件切换动画库，支持多种动画效果，包括淡入淡出、翻转、缩放等。
它的特点是 轻量级、高性能 和 易于使用，非常适合在项目中实现复杂的组件切换效果。
下面，我将详细介绍如何在项目中集成和使用这个强大的动画库。
技术栈
- • Vue 3
- • Vite
- • JavaScript
搭建步骤
1. 创建 Vue 3 项目
首先，我们需要创建一个 Vue 3 项目。如果你还没有安装 Vue CLI，可以使用以下命令进行安装：
npm install -g @vue/cli
安装完成后，创建一个新的 Vue 项目：
vue create my-transx-app
在选择配置时，选择默认配置即可。
2. 安装 TransX
进入项目目录，并安装 TransX：
cd my-transx-app npm install transx
3. 配置 TransX
在 main.js 文件中引入并注册 TransX：
import { createApp } from 'vue'; import App from './App.vue'; import TransX from 'transx'; const app = createApp(App); app.use(TransX); app.mount('#app');
4. 使用 TransX
在组件中使用 TransX 提供的动画效果。以下是一个简单的示例：
<template> <div> <button @click="prev">Previous</button> <button @click="next">Next</button> <TransX ref="transx" :defaultIndex="currentIndex" :time="0.6"> <div v-for="(item, index) in items" :key="index" class="item"> {{ item }} </div> </TransX> </div> </template> <script setup> import { ref } from 'vue'; const currentIndex = ref(0); const items = ref(['Page 1', 'Page 2', 'Page 3']); const transx = ref(null); const prev = () => { currentIndex.value = (currentIndex.value - 1 + items.value.length) % items.value.length; transx.value.prev(); }; const next = () => { currentIndex.value = (currentIndex.value + 1) % items.value.length; transx.value.next(); }; </script> <style> .item { display: flex; justify-content: center; align-items: center; height: 200px; background-color: #f0f0f0; margin: 10px 0; } </style>
支持的参数
| 参数 | 说明 | 类型 | 默认值 | 备注 |
time |
动画时长 | number | 0.6 | 单位秒 |
loop |
是否循环展现 | boolean | true | |
autoplay |
是否自动循环 | boolean, number | false | autoplay 传递为 true 时，会赋予默认值1000，单位毫秒 |
delay |
动画间隔 | number | -1 | |
defaultIndex |
默认显示第几张 | number | 0 | |
nextTransition |
下一个的动画 | string | moveLeftBack | 动画种类见下方 |
prevTransition |
上一个的动画 | string | moveRightBack | 动画种类见下方 |
支持的事件
| 事件 | 说明 | 回调参数 |
over |
跳转到了边界后的回调 | isEnd：边界状态，false 表示第一页，true 表示最后一页 |
transitionend |
动画结束时的回调 | currentIndex：当前的索引，值从 0 开始 |
示例代码
<template> <TransX ref="transx" @over="onOver" @transitionend="onTransitionEnd" :time="0.6"> <div v-for="(item, index) in items" :key="index" class="item"> {{ item }} </div> </TransX> </template> <script setup> import { ref } from 'vue'; const items = ref(['Page 1', 'Page 2', 'Page 3']); const onOver = (isEnd) => { console.log('边界到了', isEnd); }; const onTransitionEnd = (currentIndex) => { console.log('当前到第几页了: ', currentIndex); }; </script>
支持的 API
| API | 说明 | 示例代码 |
goto |
跳转到第几页 | this.$refs.transx.goto(3); |
prev |
跳转到上一页 | this.$refs.transx.prev(); |
next |
跳转到下一页 | this.$refs.transx.next(); |
支持的动画种类
- •
fadeIn: 淡入 - •
fadeOut: 淡出 - •
flip: 翻转 - •
moveLeftQuart - •
moveRightQuart - •
moveLeftBack - •
moveRightBack - •
zoomOutBack - •
zoomInBack - •
rotateLeftBack - •
rotateRightBack - •
rotateLeftTop - •
rotateRightTop - •
zoomRotateIn - •
zoomRotateOut - •
shuttleLeft - •
shuttleRight - •
shuttleDown - •
shuttleUp - •
rollLeft - •
rollRight - •
scaleXLeft - •
scaleXRight
github地址
https://github.com/tnfe/transx
在线演示
https://codesandbox.io/s/practical-sid-0ubim
结语
我特别喜欢 TransX 的几个方面：
- 1. 轻量级：相比其他庞大的动画库，TransX 非常轻量，几乎不会对项目性能造成影响。
- 2. 多样性：TransX 提供了丰富的动画种类，几乎能够满足我们所有的动画需求。
- 3. 易用性：无论是参数配置还是事件处理，TransX 都非常简单直观，上手容易。
