LimeUI+1.2.1

主题

LimeTransition 动画 ​

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

插件依赖：lime-shared

文档链接 ​

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

安装方法 ​

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

代码演示 ​

基础使用 ​

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

html
<l-transition :visible="show" :appear="true">
    <view class="box">内容</view>
</l-transition>
js
export default {
    data() {
        return {
            show: true
        }
    }
}

动画类型 ​

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

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

控制显示隐藏 ​

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

html
<l-transition :visible="show" name="fade">
    <view class="box">点击按钮控制显示/隐藏</view>
</l-transition>
<button @tap="show = !show">{{ show ? '隐藏' : '显示' }}</button>
js
export default {
    data() {
        return {
            show: true
        }
    }
}

自定义动画时长 ​

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

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

首次渲染动画 ​

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

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

隐藏时销毁内容 ​

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

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

监听动画事件 ​

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

html
<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>
js
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('离开后触发');
        }
    }
}

快速预览 ​

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

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

Vue2使用说明 ​

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

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

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

API文档 ​

Props ​

参数说明类型默认值
name动画类型stringfade
visible是否展示组件booleantrue
appear首次出现是否展示动画booleanfalse
destoryOnClose隐藏时是否销毁内容booleanfalse
duration动画时长，单位为毫秒number300
zIndex层级number11000
l-style自定义样式string-

Events ​

事件名说明参数
before-enter进入前触发-
enter进入中触发-
after-enter进入后触发-
before-leave离开前触发-
leave离开中触发-
after-leave离开后触发-

外部样式类 ​

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

类名说明
l-class根节点样式类
enter-class定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
enter-active-class定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
enter-to-class定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 enter-class 被移除)，在过渡/动画完成之后移除。
leave-class定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
leave-active-class定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
leave-to-class定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 leave-class 被删除)，在过渡/动画完成之后移除。

动画类型 ​

名称说明效果描述
fade淡入元素透明度从0到1的变化
fade-up上滑淡入元素从下方向上移动并逐渐显示
fade-down下滑淡入元素从上方向下移动并逐渐显示
fade-left左滑淡入元素从右向左移动并逐渐显示
fade-right右滑淡入元素从左向右移动并逐渐显示
slide-up上滑进入元素从下方向上滑动进入视图
slide-down下滑进入元素从上方向下滑动进入视图
slide-left左滑进入元素从右向左滑动进入视图
slide-right右滑进入元素从左向右滑动进入视图

支持与赞赏 ​

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

支付宝赞助微信赞助

源代码 ​

组件源码