Bootstrap 4转换的持续时间值是多少？

Bootstrap 4 中的转换（transition）持续时间默认值为 0.3 秒。这个值可以通过自定义 CSS 来修改。

基础概念

Bootstrap 的转换效果是通过 CSS3 的 transition 属性实现的，它允许元素在样式变化时平滑过渡。

类型

Bootstrap 4 支持多种类型的转换效果，包括但不限于：

颜色变化
尺寸变化（如宽度、高度）
透明度变化
位置变化（如滑动）

应用场景

导航栏：当用户滚动页面时，导航栏的背景颜色可以平滑地从透明变为不透明。
模态框：打开和关闭模态框时的淡入淡出效果。
卡片翻转：在卡片布局中实现翻转效果以展示更多信息。

示例代码

以下是一个简单的例子，展示了如何在 Bootstrap 4 中自定义一个元素的转换持续时间：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Transition Duration Example</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    .custom-transition {
      transition-duration: 1s; /* 自定义转换持续时间为1秒 */
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <button class="btn btn-primary" onclick="toggleClass()">Toggle Class</button>
    <div id="transitionElement" class="card custom-transition mt-3">
      <div class="card-body">
        Click the button to see the transition effect.
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    function toggleClass() {
      $('#transitionElement').toggleClass('bg-success');
    }
  </script>
</body>
</html>

在这个例子中，点击按钮会切换 #transitionElement 的背景颜色，并且由于设置了 custom-transition 类，颜色变化的过渡时间为1秒。