Question

我在页面中使用以下BS4版本4.3.1 CDN：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

我将以下html卡组件应用于我的页面：

<div class="container">
    <div class="card">
        <div class="card-header">
            <a data-toggle="collapse" href="#flex-content" aria-expanded="true" aria-controls="flex-content" id="flex-content-link" class="d-block">
                <i class="fa fa-chevron-down fa-lg float-right"></i>
                <h5 class="card-title">Card Title</h5>
            </a>
            <hr>
        </div>

        <div id="flex-content" class="collapse show" aria-labelledby="flex-content-link" style="">
            <div class="card-body">
                <p>Some basic content</p>
                <p>Some basic content</p>
                <p>Some basic content</p>
            </div>
        </div>
    </div>
</div>

和适用于页面的javascript

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

但是，当我尝试切换（显示/隐藏）我的元素时，来自CDN的以下CSS会覆盖主要的过渡效果：

  @media (prefers-reduced-motion: reduce) {
    .collapsing {
      transition: none; } }

...在过渡源上方，如下所示...

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease; }

为什么会这样？

感谢任何提示！

BS4 4.3.1 CDN的过渡设置为无

0 个答案: