更新记录

1.0.0（2025-08-01） 下载此版本

uview动画插件

平台兼容性

云端兼容性

uni-app x(4.75)

x-transition 动画组件

基于 uni-app x 的现代化动画过渡组件，支持多种动画模式和完整的生命周期事件。

特性

• 🎯 多种动画模式：支持淡入淡出、缩放、滑动、旋转等多种动画
• ⚡ 高性能：基于 CSS transform 和 transition 实现
• 🎨 可定制：支持自定义动画时长、缓动函数、延迟等
• 📱 跨平台：支持 Web、Android、iOS、HarmonyOS
• 🔄 完整事件：提供完整的动画生命周期事件

支持的动画模式

属性

事件

使用示例

基础用法

<template>
  <view>
    <button @click="toggle">切换动画</button>

    <x-transition :show="visible" mode="fade">
      <view class="box">淡入淡出动画</view>
    </x-transition>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)

const toggle = () => {
  visible.value = !visible.value
}
</script>

自定义动画

<template>
  <x-transition 
    :show="visible" 
    mode="bounce"
    :duration="500"
    timing-function="cubic-bezier(0.68, -0.55, 0.265, 1.55)"
    @before-enter="onBeforeEnter"
    @after-enter="onAfterEnter"
  >
    <view class="box">弹跳动画</view>
  </x-transition>
</template>

<script setup>
const onBeforeEnter = () => {
  console.log('动画开始')
}

const onAfterEnter = () => {
  console.log('动画结束')
}
</script>

多种动画模式

<template>
  <view>
    <x-transition :show="visible" mode="fade-up">
      <view class="box">上滑淡入</view>
    </x-transition>

    <x-transition :show="visible" mode="zoom">
      <view class="box">缩放动画</view>
    </x-transition>

    <x-transition :show="visible" mode="rotate">
      <view class="box">旋转动画</view>
    </x-transition>
  </view>
</template>

缓动函数

支持所有 CSS transition-timing-function 的值：

• ease - 默认，慢-快-慢
• linear - 匀速
• ease-in - 慢-快
• ease-out - 快-慢
• ease-in-out - 慢-快-慢
• cubic-bezier(x1, y1, x2, y2) - 自定义贝塞尔曲线

注意事项

1. 组件基于 CSS transform 和 transition 实现，确保目标平台支持
2. 动画时长建议在 200-500ms 之间，过短或过长都会影响用户体验
3. 在移动端使用时，建议使用 transform3d 来启用硬件加速
4. 自定义样式会覆盖默认的动画样式，请谨慎使用

兼容性