html - 如何为移动设备平滑地设置 DIV 高度的动画？

Question

我正在为我正在开发的移动网站制作一些动画。我目前正在使用 CSS 过渡，但是当我预览小部件（手风琴）时，它的动画效果根本不流畅（在 iPhone 上）。

我知道 2D/3D 变换（翻译）在硬件加速设备上运行良好。有什么东西可以用来使 DIV 的高度平稳增长吗？

这是一些示例代码：

<div class="accordion" data-dojo-type="tui.widget.common.Accordion">
    <div class="item">
        <div class="trigger">
              <p>Board options</p></i>
        </div>
        <div class="content">
            <ul class="board">
                <li class="included">Half Board Included</li>
                <li>Self Catering -&pound;220</li>
                <li>All Inclusive +&pound;140</li>
            </ul>
        </div>
    </div>
</div>

任何帮助是极大的赞赏。谢谢

Answer 1

translate 的特殊之处在于您不会通过 translate3d'ing 元素来影响页面的其余部分。在更改高度时，浏览器必须为每个高度更改呈现完整的页面——这对于现代智能手机的像素数量来说并不是微不足道的。

您可以改为直接显示所有内容并提供带有锚点的菜单。您可以在移动设备上平滑淡入或转换到视口中的菜单。