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

【问题标题】：How do I animate a DIV height smoothly for mobile?如何为移动设备平滑地设置 DIV 高度的动画？
【发布时间】：2013-10-30 18:10:03
【问题描述】：

我正在为我正在开发的移动网站制作一些动画。我目前正在使用 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>

非常感谢任何帮助。谢谢

【问题讨论】：

道场有手风琴，为什么要重新制作？无论如何，我认为 dojo.fx 包将根据设备处理动画。

标签： html css dojo css-transforms webkit-transform

【解决方案1】：

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

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

【讨论】：