轮播滑动动画在 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/[email protected]/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>

如您所见，除了滑动动画之外，一切正常。如果我使用 bootstrap v4.0.0（具有完全相同的代码）而不是 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/[email protected]/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

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

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

OSX：设置 > 常规 > 辅助功能 > 减少运动

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

Windows：设置 > 轻松访问 > 在 Windows 中显示动画 > 打开

有关此问题的更多信息，请查看 github 上的此问题。

使用 Windows 在 chrome 中工作，我打开了“在窗口中显示动画”按钮，现在一切正常。希望这对大家有帮助，如果这是一个小问题，很抱歉。

Answer 2

Bootstrap v4.5.2 和 v5.1 上的幻灯片动画问题 (https://getbootstrap.com/docs/4.5/components/carousel/)

我设法使用额外的 CSS 修复它

 <style>
    .carousel-item{
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
    } 
</style>

然后动画幻灯片开始工作，我不需要解释，阅读代码就可以说明一切。

Answer 3

要解决此问题，请添加以下 CSS：

.carousel-item{
    transition: transform .6s ease !important;
}

Answer 4

也许您在电脑设置的性能选项中选中了（调整为最佳性能）选项 问候:)