twitter-bootstrap Bootstrap 4 可折叠卡 - 断断续续的动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33635025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap 4 Collapsible Card - Choppy Animation
提问by jbyrd
I'm using Bootstrap 4 and have created a card with a .card-header and .card-block like so:
我正在使用 Bootstrap 4 并创建了一张带有 .card-header 和 .card-block 的卡片，如下所示：
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="card-block">
card block
</div>
</div>
I want to be able to click the card header to toggle the card block. I've tried using Bootstrap's collapse mechanism (you'll notice the data-toggle="collapse"in the card header). It works - but the animation is extremely choppy.
我希望能够单击卡片标题来切换卡片块。我尝试过使用 Bootstrap 的折叠机制（您会注意到data-toggle="collapse"卡片标题中的 ）。它有效 - 但动画非常断断续续。
I can't figure out why. Here's an example on codepen.
我不明白为什么。这是关于 codepen 的示例。
采纳答案by Timon
Laggy problem:
滞后问题：
The problem is the .card-blockclass, it adds a padding of 1.25rem by default.
问题是.card-block类，它默认添加了 1.25rem 的填充。
If you would remove the class card-block from the div#test-block, and create a div inside with the class card-block (so you keep the padding you require), the laggy problem will go away.
如果您从 div#test-block 中删除 class card-block，并在 class card-block 内部创建一个 div（这样您就可以保留所需的填充），滞后问题就会消失。
Clicky problem:
点击问题：
There is no class with collapse on your #test-block, so it needs to add it first. That's why it works on the second try.
#test-block 上没有带有折叠的类，因此需要先添加它。这就是它在第二次尝试时起作用的原因。
If you add a class with the name "collapse" to div#test-block, your laggy problem will go away.
如果你在 div#test-block 中添加一个名为“collapse”的类，你的延迟问题就会消失。
If you want the panel to be opened by default, add the "in" class too. e.g. "collapse in".
如果您希望面板默认打开，请添加“in”类。例如“折叠”。
I have the following code:
我有以下代码：
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-block">
card block
</div>
</div>
</div>
回答by Nvan
That probably why bootstrap 4 is still in alpha. It will probably be fix.
这可能是 bootstrap 4 仍处于 alpha 阶段的原因。它可能会修复。
The only solution I found is to collapse your card-blockby adding the class collapse, and then removing his padding by css :
我找到的唯一解决方案是card-block通过添加 class来折叠您collapse，然后通过 css 删除他的填充：
.card-block{ padding:0; }
回答by Halycon
The #test-block has the default state:
#test-block 具有默认状态：
<div id='test-block' class='card block'>
When clicked once the class changes to the expanded version of
一旦点击类更改为扩展版本
<div id='test-block' class="card-block collapse in" aria-expanded="true">
So the div does not have the correct default state. Change the state to reflect the collapse inand aria-expanded=trueand it should require only 1 click.
所以 div 没有正确的默认状态。更改状态以反映collapse in和aria-expanded=true，它应该只需要单击 1 次。
I have no idea why the animation is choppy. :(
我不知道为什么动画是断断续续的。:(
