极客教程React.js Blueprint Popover2 测试动画延迟
Blueprint 是基于React的Web UI工具包。该库在构建复杂和数据密集的桌面应用程序界面方面非常优化和流行。
在本文中，我们将讨论 React.js Blueprint Popover2 测试动画延迟 。Popovers帮助显示浮动内容与目标元素相邻。有时，由于延迟和过渡，悬停交互可能变得棘手，但可以通过将默认悬停延迟值设置为0来解决这些问题。
React.js Blueprint Popover2 属性：
- autoFocus: 它表示当首次打开叠加层时，是否应该获得应用程序焦点。
- backdropProps: 它表示背景元素的HTML属性。
- boundary: 它表示提供给flip和preventOverflow修饰符的边界元素。
- canEscapeKeyClose: 它表示按ESC键是否应该调用onClose方法。
- captureDismiss: 当启用此属性时，当用户点击一个Classes.POPOVER_DISMISS元素内部时，只会关闭当前的弹出框，而不是外部的弹出框。
- children: 它表示将触发弹出框的交互元素。
- className: 它表示要传递给子元素的一系列用空格分隔的类名。
- content: 它表示将在弹出框中显示的内容。
- defaultIsOpen: 它表示未控制时的初始打开状态。
- disabled: 当为 true 时，它会阻止弹出框出现。
- enforceFocus: 它表示覆盖层是否应阻止焦点离开自身。
- fill: 它表示包裹器和目标是否应占据其容器的整个宽度。
- hasBackdrop: 当弹出框关闭之前，它会在弹出框下方启用一个无形的覆盖层，捕获点击事件并阻止与文档其余部分的交互。
- hoverCloseDelay: 它表示在用户悬停在触发器上后，浮出框应该保持打开的时间（以毫秒为单位）。
- hoverOpenDelay: 它表示在用户悬停在触发器上后，浮出框应该等待打开的时间（以毫秒为单位）。
- inheritDarkTheme: 它指示一个使用Portal的浮出框是否应该自动继承其父元素的暗主题。
- interactionKind: 它表示触发浮出框显示的悬停交互的类型。
- isOpen: 它指示浮出框是否可见。
- lazy: 当设置为true且usePortal为true时，它是一个包含在首次打开覆盖层时创建和附加到DOM的子元素的Portal。
- matchTargetWidth: 它表示弹出窗口内容是否应被调整为与目标宽度相匹配。
- minimal: 它表示是否对此弹出窗口应用最小样式。
- modifiers: 它覆盖了Popper.js内置的修饰符。
- modifiersCustom: 它表示要添加到popper实例的自定义修饰符。
- onClose: 它是一个在用户交互导致覆盖层关闭时触发的回调函数。
- onClosed: 它表示在CSS关闭过渡结束之后但子元素从DOM中移除之前调用的生命周期方法。
- onClosing:
- 它表示在子元素的CSS关闭过渡开始之前调用的生命周期方法。
- onInteraction: 这是一个回调函数，在受控模式下，当用户交互导致弹出框的打开状态发生变化时会触发。
- opened: 它表示在CSS打开过渡结束后调用的生命周期方法。
- onOpening: 它表示在将子元素挂载到DOM后但在CSS打开过渡开始之前调用的生命周期方法。
- openOnTargetFocus: 它指示当目标元素获得焦点时弹出框是否应该打开。
- placement: 它表示弹出框应该出现的位置。
- popoverClassName: 它表示应用于弹出框元素的类名字符串。
- popoverRef: 它传递给Classes.POPOVER元素的ref。
- popupKind: 它表示弹出框显示的类型。
- portalClassName: 如果usePortal为true，它表示应用于Portal元素的类名字符串。
- portalContainer: 如果usePortal为true，它表示作为覆盖内容渲染容器元素。
- position: 它表示弹出框应该出现的位置。与placement属性互斥。
- positioningStrategy： 用于Popper.js定位策略。
- renderTarget： 表示接收Popover2注入的props的目标渲染器，这些props应该扩展到渲染元素上。
- rootBoundary： 表示传递给flip和preventOverflow修饰器的根边界元素。
- shouldReturnFocusOnClose： 表示当此气泡关闭后，应用程序是否应将焦点返回到文档中上一个活动元素。
- targetTagName： 表示目标元素的HTML标签名称。
- transitionDuration： 指示气泡出现/消失过渡所需的时间，以毫秒为单位。
- usePortal: 它指示弹出窗口是否应该渲染在连接到portalContainer prop的Portal中。
语法:
<Popover2
hoverCloseDelay={0}
hoverOpenDelay={0}
...
/>
创建React应用并安装模块：
步骤1： 使用以下命令创建React应用：
npm create-react-app appname
步骤2： 在创建项目文件夹（如appname）后，使用以下命令进入该文件夹：
cd appname
步骤3： 创建 ReactJS 应用程序后，使用以下命令安装所需模块：
npm install @blueprintjs/core
项目结构：
步骤4： 执行以下操作：
**npm start**
示例1： 下面的示例演示了在弹出框中使用hoverOpenDelay，值为0。
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>
ReactJs Blueprint Popover2
Testing Animation delays
</h2>
</div>
<Popover2
content={
<div style={{
backgroundColor: "#F0EFEF",
padding: 20
}}>
<h2>GeeksforGeeks</h2>
<p>You are zeroing hoverOpenDelay.</p>
</div>
}
interactionKind="hover"
placement="right"
hoverOpenDelay={0}
>
<Button text="Hover" intent="success" />
</Popover2>
</center>
);
}
export default App;
输出：
示例2: 下面的示例演示了在一个弹出框中使用hoverCloseDelay的值为0的情况。
import React from "react";
import "@blueprintjs/core/lib/css/blueprint.css";
import { Button } from "@blueprintjs/core";
import { Popover2 } from "@blueprintjs/popover2";
import "@blueprintjs/popover2/lib/css/blueprint-popover2.css";
function App() {
return (
<center>
<div style={{ textAlign: "center", color: "green" }}>
<h1>GeeksforGeeks</h1>
<h2>
ReactJs Blueprint Popover2
Testing Animation delays
</h2>
</div>
<Popover2
content={
<div style={{
backgroundColor: "#F0EFEF",
padding: 20
}}>
<h2>GeeksforGeeks</h2>
<p>You are zeroing hoverCloseDelay.</p>
</div>
}
interactionKind="hover"
placement="right"
hoverCloseDelay={0}
>
<Button text="Hover" intent="success" />
</Popover2>
</center>
);
}
export default App;
输出：
参考： https://blueprintjs.com/docs/#popover2-package/popover2.testing