css - 包含 bootstrap 4 样式表时，Flex 增长动画不起作用

Question

我一直在尝试让过渡与 flex grow 一起工作。它按预期工作，但当我包含 bootstrap 4 样式表时就不行了。我不使用 bootstrap 4 类（还），它只是包含在内。

在下面的代码中，当从行中删除“折叠”类时，行将基于 flex-grow 进行动画处理。

当您编辑代码片段并启用引导样式行时，它会停止工作。谁能告诉我为什么:-)

这是 js fiddle 看到它不起作用...

不工作的JSFiddle

$(function() {
  setTimeout(function() {
    $(".test-row-collapse").removeClass("collapse");

    setTimeout(function() {
      $(".test-row-collapse").addClass("collapse");
    }, 2000);
  }, 2000);
});

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  font-size: 10px;
}

.animate-grow-container {
  flex-basis: auto;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.animate-grow-row {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  transition: all 2s;
  text-align: center;
}

.animate-grow-row-overflow {
  max-height: 100vh;
  transition: all 2s;
  overflow: hidden;
}

.collapse .animate-grow-row-overflow {
  max-height: 0;
}

.collapse {
  flex-grow: 0.0001;
}

<!-- Enable line below and it stops working :( -->
<!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="animate-grow-container">
  <div class="animate-grow-row" style="background: red">
    <p>This is some content</p>
  </div>
  <div class="animate-grow-row" style="background: blue">
    <p>This is some content</p>
  </div>
  <div class="animate-grow-row" style="background: green" onclick="$(this).next().removeClass('collapse')">
    <p>This is some content</p>
  </div>
  <div class="animate-grow-row test-row-collapse collapse" style="background: yellow" onclick="$(this).addClass('collapse')">
    <div class="animate-grow-row-overflow">
      <p>This is some content</p>
      <p>This is some content</p>
      <p>This is some content</p>
      <p>This is some content</p>
    </div>
  </div>
</div>

标签： cssflexboxbootstrap-4transition

Answer 1

发现问题：collapse 类也是 bootstrap 的一部分。