html - 轮播滑动动画不适用于 Bootstrap 4.5.2

Question

我正在学习 Bootstrap (v4.5.2)，想为我的网站创建一个自动滑动的简单旋转木马。我查看了 Bootstrap 文档并复制了仅包含幻灯片的旋转木马的示例代码 ( https://getbootstrap.com/docs/4.5/components/carousel/ )，并向 div 添加了一些颜色和高度以查看它是否正常工作。这是代码:

.carousel-item {
  height: 100px;
}

<!-- Bootstrap v4.5.2 CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color:red;">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item" style="background-color:blue;">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color:yellow;">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

如您所见，除滑动动画外，一切正常。如果我使用 v4.0.0 的 Bootstrap 而不是 v4.5.2(具有完全相同的代码)它工作得很好:

.carousel-item{
  height: 100px;
}

<!--Bootstrap v4.0.0 CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>

<div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause: "hover";>
  <div class="carousel-inner">
    <div class="carousel-item active" style="background-color:red;">
      <img class="d-block w-100" src="..." alt="First slide">
    </div>
    <div class="carousel-item" style="background-color:blue;">
      <img class="d-block w-100" src="..." alt="Second slide">
    </div>
    <div class="carousel-item" style="background-color:yellow;">
      <img class="d-block w-100" src="..." alt="Third slide">
    </div>
  </div>
</div>

但如果可能的话，我想使用最新版本的框架。我注意到即使在文档页面中，在 v4.0.0 中滑动动画也适用于示例幻灯片(https://getbootstrap.com/docs/4.0/components/carousel/)，但在 v4.5.2(https://getbootstrap.com/docs/4.5/components/carousel/)中则不行，所以我猜这可能是来自新版本？或者也许因为我是新手我做错了什么？预先感谢您的回答，我希望问题清楚且写得很好，这是我第一次在这里问问题。

Answer 1

经过几个小时的研究，我想我刚刚找到了导致错误的原因。似乎在最新的更新中，某些 Bootstrap 代码具有功能(prefers-reduced-motion)，这是一种 CSS 媒体功能，用于检测用户是否已请求系统最小化其使用的非必要 Action 的数量。通过使用此功能，浏览器将检查操作系统的配置，并相应地显示动画。

因此，如果您在操作系统配置上减少了动画，那么浏览器将不会显示某些动画，就像在本例中一样。为了能够看到动画，您必须执行以下操作:

OSX:设置 > 通用 > 辅助功能 > 减少运动

IOS:系统偏好设置 > 辅助功能 > 显示 > 减少运动

Windows:设置 > 轻松访问 > 在 Windows 中显示动画 > 开启

有关此检查的更多信息 this issue在 github 上。

使用 chrome 使用 windows，我打开了“在 windows 中显示动画”按钮，现在一切正常。希望这对大家有所帮助，如果这是一个微不足道的问题，我们深表歉意。