轮播滑动动画不适用于 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>

如您所见，除滑动动画外，一切正常。如果我使用 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/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/) 中没有，所以我猜这可能是较新版本的错误？或者也许因为我是新手我做错了什么？预先感谢您的回答，我希望问题清楚且写得很好，这是我第一次在这里问somtehing。

Answer 1

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

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

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

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

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

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

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

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>

然后动画幻灯片就开始工作了，我不需要解释，看代码就知道了。

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

Carousel sliding animation not working on Bootstrap 4.5.2

html

css

carousel

bootstrap-4