Html 如何为mobile平滑设置DIV高度的动画？

我正在为一个移动网站制作一些动画。我现在正在使用CSS转换，但是当我预览小部件（手风琴）时，它的动画效果一点也不平滑（在iPhone上）

我知道2D/3D转换（translate）在硬件加速设备上运行良好。有什么东西可以让一个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>

董事会期权


包含半块板
自助餐饮-英镑；220
全包+英镑；140

---

非常感谢您的帮助。谢谢

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

---

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

dojo有一个手风琴，为什么要重新创建？无论如何，我认为dojo.fx包将处理基于设备的动画。