LimeTransition 动画

• 使元素从一种样式逐渐变化为另一种样式的效果，兼容uniapp/uniappx
• 这个插件不直接使用标签

安装

在 导入即可

代码演示

基础使用

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

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

动画类型

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

<l-transition :visible="true" :appear="true" name="fade-up">
	<view class="box1">内容</view>
</l-transition>

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-transition/compoents/lime-transition 
<lime-transition />

插件标签

• 默认 l-transition 为 component
• 默认 lime-transition 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可

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

API

Props

参数	说明	类型	默认值
name	动画类型	string	fade
visible	是否展示组件	boolean	true
appear	首次出现是否展示动画	boolean	false
destoryOnClose	隐藏时是否销毁内容	boolean	false
duration	动画时长，单位为毫秒	number	300
zIndex	层级	number	11000
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	淡入
fade-up	上滑淡入
fade-down	下滑淡入
fade-left	左滑淡入
fade-right	右滑淡入
slide-up	上滑进入
slide-down	下滑进入
slide-left	左滑进入
slide-right	右滑进入

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码