220 lines
8.3 KiB
Markdown
220 lines
8.3 KiB
Markdown
|
# lime-transition 动画
|
|||
|
|
lime-transition是一个强大的过渡动画组件，使元素从一种样式逐渐变化为另一种样式，提供丰富的动画效果。组件兼容uni-app和uni-app x，支持多种动画类型，可自定义动画时长和过渡效果，适用于各种交互场景。
|
|||
|
|
|
|||
|
|
> 插件依赖：`lime-shared`
|
|||
|
|
|
|||
|
|
## 文档链接
|
|||
|
|
📚 组件详细文档请访问以下站点：
|
|||
|
|
- [动画组件文档 - 站点1](https://limex.qcoon.cn/components/transition.html)
|
|||
|
|
- [动画组件文档 - 站点2](https://limeui.netlify.app/components/transition.html)
|
|||
|
|
- [动画组件文档 - 站点3](https://limeui.familyzone.top/components/transition.html)
|
|||
|
|
|
|||
|
|
## 安装方法
|
|||
|
|
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项目中使用，请按照[官方教程](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置。
|
|||
|
|
|
|||
|
|
关键配置代码（在main.js中添加）：
|
|||
|
|
```js
|
|||
|
|
// main.js vue2
|
|||
|
|
import Vue from 'vue'
|
|||
|
|
import VueCompositionAPI from '@vue/composition-api'
|
|||
|
|
Vue.use(VueCompositionAPI)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## API文档
|
|||
|
|
|
|||
|
|
### Props
|
|||
|
|
|
|||
|
|
| 参数 | 说明 | 类型 | 默认值 |
|
|||
|
|
| --------------- | ------------------------ | ---------------- | --------- |
|
|||
|
|
| name | 动画类型 | <em>string</em> | `fade` |
|
|||
|
|
| visible | 是否展示组件 | <em>boolean</em> | `true` |
|
|||
|
|
| appear | 首次出现是否展示动画 | <em>boolean</em> | `false` |
|
|||
|
|
| destoryOnClose | 隐藏时是否销毁内容 | <em>boolean</em> | `false` |
|
|||
|
|
| duration | 动画时长，单位为毫秒 | <em>number</em> | `300` |
|
|||
|
|
| zIndex | 层级 | <em>number</em> | `11000` |
|
|||
|
|
| l-style | 自定义样式 | <em>string</em> | - |
|
|||
|
|
|
|||
|
|
### 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 | 右滑进入 | 元素从左向右滑动进入视图 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 支持与赞赏
|
|||
|
|
|
|||
|
|
如果你觉得本插件解决了你的问题，可以考虑支持作者：
|
|||
|
|
| 支付宝赞助 | 微信赞助 |
|
|||
|
|
|------------|------------|
|
|||
|
|
|  |  |
|