Bootstrap 折叠 - 无动画

Posted 2023-02-22

【中文标题】Bootstrap 折叠 - 无动画

【英文标题】：Bootstrap Collapse - No Animation

【发布时间】：2018-05-22 00:54:53

【问题描述】：

我正在通过单击 Font Awesome 库中的图标在我的网站上实现 Bootstrap Collapse。当我按下它时，内容折叠，但没有动画，它只是弹出。我做错了什么？

这里是my code

<div class="container col-sm-12 banner">
    <i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
</div>
<div id="moreInfo" class="collapse">
    <div class="hiddenInfo">
                123
    </div>
</div>

【参考方案1】：

由于您对 Bootstrap 网格系统的实施不当，您遇到了冲突。 .container 和 .col-sm-12 不能以这种方式组合；会导致一系列与过渡效果冲突的浮动错误。

一旦您正确实现了 Bootstrap 的网格（并解决了与您的其他 float 的明确问题），过渡动画将按预期进行。

.banner 
  background-color: #1194f0;
  padding: 20px;


.banner i 
  font-size: 40px;
  float: right;
  line-height: 50px;


.hiddenInfo 
  background-color: black;
  color: white;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-sm-12">
      <div class="banner clearfix">
        <i class="fa fa-plus" aria-hidden="true" data-toggle="collapse" data-target="#moreInfo"></i>
      </div>
    </div>
    
    <div class="col-sm-12">
      <div id="moreInfo" class="collapse">
        <div class="hiddenInfo">
          123
        </div>
      </div>
    </div>
  </div>
</div>