114 lines
4.4 KiB
Markdown
114 lines
4.4 KiB
Markdown
|
# lime-transition 动画
|
|||
|
|
使元素从一种样式逐渐变化为另一种样式的效果，兼容uniapp/uniappx
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 文档
|
|||
|
|
🚀 [transition【站点1】](https://limex.qcoon.cn/components/transition.html)
|
|||
|
|
🌍 [transition【站点2】](https://limeui.netlify.app/components/transition.html)
|
|||
|
|
🔥 [transition【站点3】](https://limeui.familyzone.top/components/transition.html)
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 安装
|
|||
|
|
插件市场导入即可
|
|||
|
|
|
|||
|
|
## 代码演示
|
|||
|
|
### 基础使用
|
|||
|
|
将元素包裹在 transition 组件内，在元素展示/隐藏时，会有相应的过渡动画。
|
|||
|
|
```html
|
|||
|
|
<l-transition :visible="true" :appear="true">
|
|||
|
|
<view class="box1">内容</view>
|
|||
|
|
</l-transition>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 动画类型
|
|||
|
|
transition 组件内置了多种动画，可以通过`name`字段指定动画类型。
|
|||
|
|
```html
|
|||
|
|
<l-transition :visible="true" :appear="true" name="fade-up">
|
|||
|
|
<view class="box1">内容</view>
|
|||
|
|
</l-transition>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
|
|||
|
|
### 查看示例
|
|||
|
|
导入后直接使用这个标签查看演示效果
|
|||
|
|
|
|||
|
|
```html
|
|||
|
|
// 代码位于 uni_modules/lime-transition/compoents/lime-transition
|
|||
|
|
<lime-transition />
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 插件标签
|
|||
|
|
默认 l-transition 为 component
|
|||
|
|
默认 lime-transition 为 demo
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
### Vue2使用
|
|||
|
|
插件使用了`composition-api`, 如果你希望在vue2中使用请按官方的教程[vue-composition-api](https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html)配置
|
|||
|
|
关键代码是: 在main.js中 在vue2部分加上这一段即可
|
|||
|
|
|
|||
|
|
```js
|
|||
|
|
// 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 | 右滑进入 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 打赏
|
|||
|
|
|
|||
|
|
如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。
|
|||
|
|
|
|||
|
|
|