Portals 是 react 16 提供的官方解决方案，使得组件可以脱离父组件层级挂载在 DOM 树的任何位置，我们利用这个方法，可将模态对话框生成到根节点的外面，默认情况生成到跟节点的外面，通过将 usePortal 设置为 false 将对话框生成在父组件层级挂载的 DOM 树中。

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Overlay, Button, Card } from 'uiw';

export default function Demo() {
const [isOpen, setIsOpen] = React.useState(false);
function toggleOverlay(e) {
setIsOpen(!isOpen);
}
return (


动画过渡效果是根据 react-transition-group 组件封装。动画时长参数 timeout={1000} 是根据 CSS 动画样式持续时长来定义。

> 注意：@3.2.0 ~~transitionDuration={1000}~~ 更名为 timeout

`jsx mdx:preview&bg=#fff
import React from 'react';
import { Overlay, Button, Card } from 'uiw';

export default function Demo() {
const [isOpen, setIsOpen] = React.useState(false);
function toggleOverlay(e) {
setIsOpen(!isOpen);
}
return (


你可以根据动画样式库 animate.css 添加不同的出入动画。默认通过的 Less 生成 CSS 动画的实例代码，定义 transitionName 动画样式名字为 animation-bouce，下面是上面实例的样式：

`less
@animation-prefix:~"animation-flipX";
// 遮罩层动画
// Background animation
.@{animation-prefix}-enter .w-overlay-backdrop {
opacity: 0.01;
}
.@{animation-prefix}-enter-active .w-overlay-backdrop {
opacity: 1;
transition: opacity 1s ease-in;
}
.@{animation-prefix}-exit .w-overlay-backdrop {
opacity: 1;
}
.@{animation-prefix}-exit-active .w-overlay-backdrop {
opacity: 0.01;
transition: opacity 1s ease-in;
}
// 对话框动画
// Content animation
.@{animation-prefix}-enter-active .w-overlay-content {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: flipInX;
}
.@{animation-prefix}-exit-active .w-overlay-content {
animation-duration: 1s;
animation-fill-mode: both;
animation-name: flipOutX;
}

.@{animation-prefix}-enter,
.@{animation-prefix}-enter-done,
.@{animation-prefix}-exit {
display: inherit;
}

@keyframes flipOutX {
0% { transform: perspective(400px); }
30% {
transform: perspective(400px) rotateX(-20deg);
opacity: 1;
}
to {
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
}

@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
animation-timing-function: ease-in;
opacity: 0;
}
40% {
transform: perspective(400px) rotateX(-20deg);
animation-timing-function: ease-in;
}
60% {
transform: perspective(400px) rotateX(10deg);
opacity: 1;
}
80% {
transform: perspective(400px) rotateX(-5deg);
}
to { transform: perspective(400px); }
}
`

Overlay

| 参数 | 说明 | 类型 | 默认值 |
|--------- |-------- |--------- |-------- |
| isOpen | 对话框是否可见 | boolean | false |
| usePortal | 使用 react 16 提供的官方解决方案 Portals，将模态对话框生成到根节点的外面。 | boolean | true |
| maskClosable | 点击遮罩层是否允许关闭 | boolean | true |
| portalProps | 设置 Portal 组件属性 | object | {} |
| backdropProps | 遮罩层 HTML 属性设置 | object | {} |
| dialogProps | 弹出目标(对话框) HTML 属性设置 | object | - |
| unmountOnExit | 默认 true 退出动画卸载组件 | boolean | true |
| hasBackdrop | 是否有背景，是否向 添加样式 .w-overlay-open 防止滚动条出现 | boolean | true |
| transitionName | 内部 CSSTransitionsss 的转换名称。在此提供您自己的名称将需要定义新的 CSS 过渡属性。 | string | w-overlay |
| timeout | ~~transitionDuration~~ 更名为 timeout 持续时间 | number | 300 |
| onClose | 点击遮罩层回调函数，通过这个函数设置 isOpen=false 关闭。onClosed 是弹出框关闭动画执行完成后的回调函数，有明显区别容易混淆。 | Function | - |
| onEnter | 顺序 1，应用 enter 或 appear 后立即触发 回调。。 | Function(node: HtmlElement, isAppearing: bool) | - |
| onOpening | 顺序 2，打开立即执行，在应用 enter-active 或 appear-active 类后立即触发 回调。 | Function(node: HtmlElement, isAppearing: bool) | - |
| onOpened | 顺序 3，打开动画播放完成执行，在应用 exiting 状态之前启动回调。 | Function(node: HtmlElement, isAppearing: bool) | - |
| onClosing | 顺序 4，关闭立即执行，应用 exit-active 后立即触发 回调。 | Function(node: HtmlElement) | - |
| onClosed | 顺序 5，关闭动画播放完成立即执行，删除 exit 类后立即触发 回调，并将 exit-done 类添加到 DOM 节点。 | Function(node: HtmlElement) | - |

支持传递 原事件覆盖当前事件，请查看 ` 文档。