如何在 AMP 中创建类似 Bootstrap 的可折叠文件？

Posted 2023-03-24

【中文标题】如何在 AMP 中创建类似 Bootstrap 的可折叠文件？

【英文标题】：How do I create a collapsible like Bootstrap in AMP?

【发布时间】：2019-10-05 10:53:05

【问题描述】：

我正在尝试在 AMP 中使用像 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;

我希望我已经足够清楚了。

提前致谢

【问题讨论】：

为什么不使用 amp-accordion？

@JayGray 谢谢，我会检查 amp-accordion。

【参考方案1】：

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

来解决您的问题。 您不能使用值auto 转换高度。您可以在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;