我正试图创建一个可折叠的放大器与圆滑的动画一样, Bootstrap 有。
现在,我可以创建一个可折叠的类,并使用CSS调整一些高度,但如果我这样做,我将给所有可折叠的高度固定,因为内容高度不会对所有块相同,我不能给予高度。
在JavaScript中,我可以计算内容的高度,并相应地为高度制作动画,但由于我们不能在AMP中使用JavaScript,有什么方法可以做到这一点吗?
我试过用css来做。我定义了两个类,一个类通过将高度设置为0来隐藏内容,另一个类通过将高度设置为自动来显示内容。它可以工作,但它没有任何动画。然而,如果我将高度设置为一些像素而不是自动,并添加一些css过渡,它可以工作。但我不想给予所有块一些静态高度。
<!- Hidden -->
<div class="rich-text-block">
<h3>Pathological Criteria</h3>
<div class="richtext-content">If either is positive, diagnosis is definite (see Reference for exceptions)</div>
</div>
<!- Shown -->
<div class="rich-text-block shown">
<h3>Pathological Criteria</h3>
<div class="richtext-content">If either is positive, diagnosis is definite (see Reference for exceptions)</div>
</div>
.rich-text-block .richtext-content {
overflow: hidden;
transition: height 0.3s linear;
height: 0;
}
rich-text-block.shown .richtext-content {
height: auto;
}
我希望我说得够清楚了。
先谢了
1条答案
按热度按时间3okqufwl1#
您可以尝试使用amp-accordion。
接下来是您的问题。您不能使用值
auto
转换高度。您可以在transition
中使用max-height
,并将最大高度设置为比您的框高度更大的值。这种方法的问题是过渡将基于
max-height
,因此如果所有框的高度几乎相同,则所有过渡看起来几乎相同,但如果所有框的高度非常不同,则所有框的过渡持续时间看起来将不相同。