动效

概览

Bootstrap 使用 CSS 转换和动画为许多组件添加动画效果。运动工具类让你可以在单个元素上禁用该动画（.transition-none, .animation-none）或应用一个小的预定义动画（.animation-shake, .animation-pop）。

要在构建时全局禁用动画，请将 $enable-transitions Sass 选项改为 false。

过渡

将 .transition-none 添加到集合 transition: none，这样属性更改会立即应用，而不是进行动画。将鼠标悬停在下面两个按钮上：默认按钮会平滑过渡其悬停颜色变化，而第二个按钮则会立即切换。

<button type="button" class="btn-solid theme-primary">Default</button>
<button type="button" class="btn-solid theme-primary transition-none">No hover transition</button>

动画

禁用动画

将 .animation-none 添加到集合 animation: none，这会停止该元素上任何正在运行的关键帧动画（例如加载动画）。

<div class="spinner-border" role="status">
  <span class="visually-hidden">Loading...</span>
</div>
<div class="spinner-border animation-none" role="status">
  <span class="visually-hidden">Loading...</span>
</div>

摇动

添加 .animation-shake 可以播放一次简短的水平抖动效果。它与无效表单反馈配合良好——将其应用于字段（或在验证失败时通过 JavaScript 切换）以引起对需要修复内容的注意。

<input type="text" class="form-control is-invalid animation-shake" id="motionShakeDemo" value="Not quite right">

流行

将 .animation-pop 添加到缩放元素中以实现轻微的超出效果。这非常适合动态出现的内容，例如计数刚刚更新的徽章。

<span class="badge theme-primary animation-pop" id="motionPopDemo">New</span>

减少动画

.transition-none 和 .animation-none 总是被应用，无论用户的运动偏好如何——当你想在每种情况下都移除动画时，请使用它们。Bootstrap 已经为其自身组件支持 prefers-reduced-motion 媒体特性，因此你不需要仅仅为了遵守该设置而使用它们。

添加动作的工具.animation-shake和.animation-pop是装饰性的，因此当用户选择减少动画时，它们会自动被禁用。

CSS

变量

组件将它们的运动声明为 -duration 和 -timing 代币对，因此你可以独立调整速度和缓动。例如，淡出和折叠过渡分别读取 --bs-transition-fade-duration / --bs-transition-fade-timing 和 --bs-transition-collapse-duration / --bs-transition-collapse-timing。

$fade-tokens: defaults(
  (
    --transition-fade-duration: .15s,
    --transition-fade-timing: linear,
  ),
  $fade-tokens
);

// stylelint-disable custom-property-no-missing-var-function
$collapse-tokens: defaults(
  (
    --transition-collapse-property: "block-size, display",
    --transition-collapse-duration: .35s,
    --transition-collapse-timing: ease,
  ),
  $collapse-tokens
);
// stylelint-enable custom-property-no-missing-var-function

我们的覆盖组件——对话框、抽屉和菜单——在 :root 级别共享一个缓动曲线，因此单一的重写可以重新设置这三者的样式。

// Shared easing curve for overlay components (dialog, drawer, menu)
--transition-timing-overlay: cubic-bezier(.22, 1, .36, 1),

Sass 工具 API

运动工具在我们的工具 API scss/_utilities.scss 中声明。了解如何使用工具 API。

"transition": (
  property: transition,
  class: transition,
  values: (
    none: none,
  )
),

"animation": (
  property: animation,
  class: animation,
  values: (
    none: none,
    shake: animation-shake .82s cubic-bezier(.36, .07, .19, .97) both,
    pop: animation-pop .3s cubic-bezier(.34, 1.56, .64, 1) both,
  )
),