如何禁用BlueprintJS Dialog的打开动画？

我来帮你搞定这个对话框动画卡顿的问题！针对BlueprintJS的Dialog组件，有两种简单的方法可以禁用那个缓慢又卡顿的展开动画：

方法一：直接使用组件内置属性（推荐） #

Blueprint的Dialog组件本身提供了transitionDuration属性，你只需要把它的值设为0，就能完全关闭过渡动画。这样修改最直接，不需要额外的CSS：

<BP.Dialog
  iconName="application"
  isOpen={this.state.fieldformopen}
  transitionDuration={0} // 关键：设置为0禁用动画
  // 你的其他属性
>
  {/* 对话框内容 */}
</BP.Dialog>

这个属性在Blueprint v4及以上版本都支持，是官方推荐的控制动画时长的方式，设为0就相当于完全禁用动画。

方法二：用CSS强制覆盖动画（兼容旧版本） #

如果你的Blueprint版本比较老，transitionDuration属性不生效的话，可以通过CSS强制去掉过渡效果。针对Dialog的核心容器类写样式：

/* 禁用对话框容器的过渡动画 */
.bp4-dialog-container {
  transition: none !important;
}

/* 禁用对话框本身的过渡动画 */
.bp4-dialog {
  transition: none !important;
}

把这段CSS加到你的项目样式里，就能强制取消对话框的展开/收起动画，避免内容多的时候出现卡顿。

内容的提问来源于stack exchange，提问作者Riccardo Cohen