更新记录

0.1.6（2025-08-13） 下载此版本

• fix: 修复uniappx 把type 当变量的问题

0.1.5（2025-08-13） 下载此版本

• fix: 修复uniapp 把type 当变量的问题

0.1.4（2025-05-30） 下载此版本

• fix: 修复uniappx ios真机不过渡的问题

平台兼容性

云端兼容性

uni-app(4.45)

uni-app x(4.75)

lime-transition 动画

lime-transition是一个强大的过渡动画组件，使元素从一种样式逐渐变化为另一种样式，提供丰富的动画效果。组件兼容uni-app和uni-app x，支持多种动画类型，可自定义动画时长和过渡效果，适用于各种交互场景。

插件依赖：lime-shared

文档链接

📚 组件详细文档请访问以下站点：

• 动画组件文档 - 站点1
• 动画组件文档 - 站点2
• 动画组件文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-transition
2. 导入后可能需要重新编译项目
3. 在页面中使用l-transition组件（组件）或lime-transition（演示）

代码演示

基础使用

将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。

<l-transition :visible="show" :appear="true">
    <view class="box">内容</view>
</l-transition>

export default {
    data() {
        return {
            show: true
        }
    }
}

动画类型

transition 组件内置了多种动画，可以通过name字段指定动画类型。

<l-transition :visible="show" :appear="true" name="fade-up">
    <view class="box">上滑淡入效果</view>
</l-transition>

控制显示隐藏

通过控制visible属性来显示或隐藏元素，触发相应的过渡动画。

<l-transition :visible="show" name="fade">
    <view class="box">点击按钮控制显示/隐藏</view>
</l-transition>
<button @tap="show = !show">{{ show ? '隐藏' : '显示' }}</button>

export default {
    data() {
        return {
            show: true
        }
    }
}

自定义动画时长

通过duration属性可以自定义动画的持续时间，单位为毫秒。

<l-transition :visible="show" name="fade-up" :duration="800">
    <view class="box">较慢的动画效果</view>
</l-transition>

首次渲染动画

通过设置appear属性为true，可以在组件首次渲染时就执行动画。

<l-transition :visible="true" :appear="true" name="slide-down">
    <view class="box">首次渲染就会有下滑进入动画</view>
</l-transition>

隐藏时销毁内容

通过设置destoryOnClose属性为true，可以在元素隐藏时销毁其内容，适用于需要重新初始化的场景。

<l-transition :visible="show" :destoryOnClose="true" name="fade">
    <view class="box">隐藏时会销毁内容</view>
</l-transition>

监听动画事件

transition 组件提供了多个事件，可以在动画的不同阶段执行相应的操作。

<l-transition 
    :visible="show" 
    name="fade"
    @before-enter="onBeforeEnter"
    @enter="onEnter"
    @after-enter="onAfterEnter"
    @before-leave="onBeforeLeave"
    @leave="onLeave"
    @after-leave="onAfterLeave">
    <view class="box">监听动画事件</view>
</l-transition>

export default {
    data() {
        return {
            show: true
        }
    },
    methods: {
        onBeforeEnter() {
            console.log('进入前触发');
        },
        onEnter() {
            console.log('进入中触发');
        },
        onAfterEnter() {
            console.log('进入后触发');
        },
        onBeforeLeave() {
            console.log('离开前触发');
        },
        onLeave() {
            console.log('离开中触发');
        },
        onAfterLeave() {
            console.log('离开后触发');
        }
    }
}

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-transition/components/lime-transition -->
<lime-transition />

Vue2使用说明

本插件使用了composition-api，如需在Vue2项目中使用，请按照官方教程配置。

关键配置代码（在main.js中添加）：

// main.js vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Events

外部样式类

由于小程序的限制，只能在全局样式设置

动画类型

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：	支付宝赞助	微信赞助