Question

我正在使用Bootstrap 3面板

扩展面板时会有一个奇怪的动画。它会在扩展状态下扩展，折叠，然后重新出现。

仅在Safari浏览器中发生。

<main role="main">
       <h1 style="margin-top:63px;">Builds</h1>
<div class="panel-group mob_app_builds_history" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-primary">
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse25" role="tab" id="headingOne25">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" href="#collapse25" aria-expanded="false" aria-controls="collapse25">
          NBC <small style="mix-blend-mode: difference;">6 days ago</small>
        </a>
        <i class="indicator glyphicon glyphicon-chevron-down  pull-right"></i>
      </h4>
    </div>
    <div id="collapse25" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading25">
      <div class="panel-body">
        <p><b>Bundle:</b> abcd.ipa</p>
        <p><b>Tag:</b> "v3.17"</p>
      </div>
    </div>
  </div>
  </div><div>

https://jsfiddle.net/zprL63tq/

Answer 1

我添加了以下内容，它运行正常。

<div id="collapseOne" class="accordion-body collapse in no-transition">
Add the CSS..

.no-transition {
  -webkit-transition: height 0.001s;
  -moz-transition: height 0.001s;
  -ms-transition: height 0.001s;
  -o-transition: height 0.001s;
  transition: height 0.001s;
}

参考：Twitter Bootstrap 100% height accordion "jump"

Safari中的Bootstrap 3面板动画问题

1 个答案: