mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
9132174b11
* docs(button): 更新按钮组件文档对开放能力的描述 - 修改 session-message-title 和 session-message-path 属性名称 - 新增 chooseavatar 和 agreeprivacyauthorization 事件回调 * docs(icon): 更新图标组件文档 - 调整属性描述，明确 name 属性可用于图标名称或图片链接 - 添加事件列表，明确 click 事件的参数 - 移除英文示例代码中不必要的示例和图标列表 - 优化文档结构和格式，使信息更加清晰 * docs(config-provider): 更新全局配置组件文档 - 调整文档中的强调样式，使用加粗替代下划线 - 完善英文文档缺失的内容，保持和中文文档一致 * docs(component): 更新 Popup 组件文档 - 调整文档结构，优化标题层级 - 添加 v-model 使用示例，明确组件绑定值 - 移除冗余的代码示例，精简文档内容 - 更新属性表格，统一属性描述 - 添加防止滚动穿透的解决方案说明 * docs(resize): ✏️ 更新 resize 组件文档 - 修正事件名称从 `size` 改为 `resize` - 添加组件属性（Attributes）、事件（Events）和插槽（Slots）的详细说明 - 更新文档结构，使其更加完整和易于理解 * docs(transition): ✏️完善Transition 动画组件文档的属性和事件描述 - 增加自定义根节点样式类、懒渲染、动画结束后销毁子节点等属性 - 添加进入和离开过渡的开始、激活和结束状态类 - 新增点击事件和默认插槽 - 更新文档以反映新增功能 * docs(fab): ✏️更新fab组件文档 - 优化了文档结构，调整了部分格式 - 添加了 Methods 和 default Slot 相关的信息 - 更新了 custom-style 属性的命名 * docs(component): ✏️ 更新 Text 组件文档 - 优化文档格式，调整表格结构 - 添加缺失的参数说明和示例代码 - 更新参数类型和默认值 - 增加 call 参数说明 - 补充 Slots 表格 * docs(root-portal): ✏️ 更新组件文档 - 添加 Attributes 和 Events 部分，说明该组件无相关配置 - 修正 Slots 部分的版本信息，统一为 1.11.0 - 更新中文和英文文档
140 lines
6.7 KiB
Markdown
140 lines
6.7 KiB
Markdown
# Transition 动画
|
|
|
|
用于在元素进入或离开时应用过渡效果。
|
|
|
|
## 基本用法
|
|
|
|
将元素包裹在 `wd-transition` 标签中，并设置 `show` 来切换显隐，设置 `name` 选择动画。
|
|
|
|
```html
|
|
<wd-transition :show="show" name="fade">内容</wd-transition>
|
|
```
|
|
|
|
## 动画类型
|
|
|
|
`wd-transition` 内置了常用的动画，如 `fade`、`slide`、`zoom-in` 等。
|
|
|
|
```html
|
|
<wd-transition :show="show" name="slide">内容</wd-transition>
|
|
```
|
|
|
|
## 动画时间
|
|
|
|
可以通过 `duration` 设置动画执行时间，动画拆分为 `enter` 进入动画和 `leave` 离开动画，`duration` 可以分别设置进入动画执行时间和离开动画执行时间： `{ enter: 300, leave: 500 }`。
|
|
|
|
## 自定义动画
|
|
|
|
可以通过 `enter-class`、`enter-active-class`、`enter-to-class`、`leave-class`、`leave-active-class`、`leave-to-class` 设置自定义动画的类名。
|
|
|
|
在动画进入时，会给标签设置 `enter-class` 和 `enter-active-class` 样式，在下一帧切换为 `enter-to-class` 和 `enter-active-class` 样式，因此进入动画是从 `enter-class` 样式切换为 `enter-to-class` 样式状态，`enter-active-class` 设置 `transition` 相关属性。
|
|
|
|
在动画离开时，会给标签设置 `leave-class` 和 `leave-active-class` 样式，在下一帧切换为 `leave-to-class` 和 `leave-active-class` 样式，因此离开动画是从 `leave-class` 样式切换为 `leave-to-class` 样式状态，`leave-active-class` 设置 `transition` 相关属性。
|
|
|
|
```html
|
|
<wd-transition
|
|
:show="customShow"
|
|
:duration="{ enter: 700, leave: 1000 }"
|
|
enter-class="custom-enter"
|
|
enter-active-class="custom-enter-active"
|
|
enter-to-class="custom-enter-to"
|
|
leave-class="custom-leave"
|
|
leave-active-class="custom-leave-active"
|
|
leave-to-class="custom-leave-to"
|
|
custom-class="block"
|
|
/>
|
|
```
|
|
|
|
```scss
|
|
:deep(button) {
|
|
margin: 0 10px 10px 0;
|
|
}
|
|
:deep(.block) {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin: -50px 0 0 -50px;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: #0083ff;
|
|
}
|
|
|
|
:deep(.custom-enter-active),
|
|
:deep(.custom-leave-active) {
|
|
transition-property: background, transform;
|
|
}
|
|
:deep(.custom-enter) {
|
|
transform: translate3d(-100px, -100px, 0) rotate(-180deg);
|
|
background: #ff0000;
|
|
}
|
|
:deep(.custom-leave-to) {
|
|
transform: translate3d(100px, 100px, 0) rotate(180deg);
|
|
background: #ff0000;
|
|
}
|
|
```
|
|
|
|
## Attributes
|
|
|
|
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
|
|--------------|--------------|------------------|----------------|---------|----------|
|
|
| show | 是否展示组件 | boolean | - | - | - |
|
|
| name | 动画类型 | string / array | `TransitionName` | - | - |
|
|
| duration | 动画执行时间 | number / object / boolean | - | 300(ms) | - |
|
|
| custom-style | 自定义样式 | string | - | - | - |
|
|
| custom-class | 自定义根节点样式类 | string | - | - | - |
|
|
| lazy-render | 弹层内容懒渲染 | boolean | - | false | - |
|
|
| destroy | 是否在动画结束时销毁子节点 | boolean | - | true | - |
|
|
| enter-class | 进入过渡的开始状态 | string | - | - | - |
|
|
| enter-active-class | 进入过渡的激活状态 | string | - | - | - |
|
|
| enter-to-class | 进入过渡的结束状态 | string | - | - | - |
|
|
| leave-class | 离开过渡的开始状态 | string | - | - | - |
|
|
| leave-active-class | 离开过渡的激活状态 | string | - | - | - |
|
|
| leave-to-class | 离开过渡的结束状态 | string | - | - | - |
|
|
| disable-touch-move | 是否阻止触摸滚动 | boolean | - | false | 1.11.0 |
|
|
|
|
### TransitionName 动画类型
|
|
|
|
| 名称 | 说明 | 最低版本 |
|
|
|-------------|--------------|----------|
|
|
| fade | 淡入淡出 | - |
|
|
| fade-down | 向下淡入淡出 | - |
|
|
| fade-left | 向左淡入淡出 | - |
|
|
| fade-right | 向右淡入淡出 | - |
|
|
| fade-up | 向上淡入淡出 | - |
|
|
| slide-down | 向下滑动 | - |
|
|
| slide-left | 向左滑动 | - |
|
|
| slide-right | 向右滑动 | - |
|
|
| slide-up | 向上滑动 | - |
|
|
| zoom-in | 缩放进入 | - |
|
|
| zoom-out | 缩放离开 | - |
|
|
|
|
|
|
## Events
|
|
|
|
| 事件名称 | 说明 | 参数 | 最低版本 |
|
|
| ---------------- | ---------- | ---- | -------- |
|
|
| before-enter | 进入前触发 | - | - |
|
|
| enter | 进入时触发 | - | - |
|
|
| after-enter | 进入后触发 | - | - |
|
|
| before-leave | 离开前触发 | - | - |
|
|
| leave | 离开时触发 | - | - |
|
|
| after-leave | 离开后触发 | - | - |
|
|
| click | 点击时触发 | - | - |
|
|
|
|
## Slots
|
|
|
|
| 插槽名称 | 说明 | 最低版本 |
|
|
|---------|------|---------|
|
|
| default | 需要应用动画效果的内容 | - |
|
|
|
|
## 外部样式类
|
|
|
|
| 类名 | 说明 | 最低版本 |
|
|
| ------------------ | ---------------------------------------------------------------------------------------------------------------------- | -------- |
|
|
| custom-class | 根节点样式 | - |
|
|
| enter-class | 定义进入过渡的开始状态，在元素被插入前生效，在插入的下一帧移除 | - |
|
|
| enter-active-class | 定义动画执行期间的状态，在整个进入动画中应用；在元素被插入前生效，在动画结束后移除；可以定义 transition 相关属性 | - |
|
|
| enter-to-class | 定义进入过渡的结束状态，在元素被插入的下一帧生效，在动画结束后移除 | - |
|
|
| leave-class | 定义离开过渡的开始状态，在离开动画触发时立即生效，在下一帧移除 | - |
|
|
| leave-active-class | 定义动画执行期间的状态，在整个离开动画中应用；在离开动画触发时立即生效，在动画结束后移除；可以定义 transition 相关属性 | - |
|
|
| leave-to-class | 定义离开过渡的结束状态，在离开动画触发时的下一帧生效，在动画结束后移除 | - |
|