Question

我正在尝试使用类似Bootstrap的流畅动画在AMP中创建可折叠对象。

现在，我可以通过切换类和使用CSS调整高度来创建可折叠对象，但是如果这样做，我将为所有可折叠对象提供固定的高度，因为所有内容的内容高度都不相同块，我不能给出高度。

在JavaScript中，我可以计算内容的高度，并相应地对高度进行动画处理，但是由于我们无法在AMP中使用JavaScript，有什么方法可以做到这一点？

我尝试用CSS来做。我定义了两个类，一类通过将height设置为0来隐藏内容，另一类通过将height设置为auto来显示内容。它可以工作，但是没有任何动画。但是，如果我将高度设置为某些像素而不是自动，并添加一些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;
}

我希望我足够清楚。

预先感谢

Answer 1

对于您的用例，您可以尝试amp-accordion。

您遇到的问题。您无法使用值auto转换高度。您可以在max-height中使用transition，并将max-height设置为比您的框高更大的高度。

此方法的问题是过渡将基于max-height，因此，如果您所有盒子的高度都几乎相同，则所有过渡看起来都几乎相同，但是如果您所有盒子的高度都非常高那么所有盒子的过渡持续时间将大不相同。

.rich-text-block .richtext-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s linear;
}
rich-text-block.shown .richtext-content {
    max-height: 50px;
}

如何在AMP中创建类似Bootstrap的可折叠对象？

1 个答案: