轮播滑动动画在 Bootstrap 4.5.2 上不起作用答案

【问题标题】：Carousel sliding animation not working on Bootstrap 4.5.2轮播滑动动画在 Bootstrap 4.5.2 上不起作用
【发布时间】：2020-12-28 20:58:35
【问题描述】：

我正在学习 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 的引导程序而不是 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/) 中无效，所以我猜这可能是来自较新的版本？或者，也许因为我是新手，我做错了什么？提前感谢您的回答，我希望问题清晰且写得很好，这是我第一次在这里询问。

【问题讨论】：

你提供的两个例子对我来说都是一样的。你到底是什么问题？
我看没有区别。
真的吗？我不知道为什么，但第一个示例的滑动动画在我的浏览器（chrome）上不起作用。你们知道为什么会这样吗？

标签： html css bootstrap-4 carousel

【解决方案1】：

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

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

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

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

Windows：设置 > 轻松使用 > 在 Windows 中显示动画 > 开启

有关此的更多信息，请查看 github 上的 this issue。

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

【讨论】：

我也有同样的问题，你的回答是对的！谢谢！
非常感谢

【解决方案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>

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

【讨论】：