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

Question

我正在为我正在制作的移动网站做一些动画。我目前正在使用CSS Transitions，但是当我预览小部件（手风琴）时，它根本没有动画效果（在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

关于翻译的特殊之处在于你不会通过translate3d'ing元素影响页面的其余部分。更改浏览器必须为每个高度变化渲染完整页面的高度 - 这对于现代智能手机的像素数量来说并非无足轻重。

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