How do I animate a DIV height smoothly for mobile?

Question

I'm doing some animations for a mobile site I'm working on. I am using CSS Transitions at the moment but when I preview the widget(accordion) it's not animating smoothly at all(on iPhone).

I know that 2D/3D Transforms(translate) work well on Hardware Accelerated devices. Is there something out there that I can use to make a DIV grow in height smoothly?

Here's some sample code:

<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>

Any help is greatly appreciated. Thanks

Answer 1

The special about translate is you do not effect the rest of the page by translate3d'ing an element. Whereat changing the height the browser has to render the complete page for each height change - which is not trivial for the amount of pixels a modern smartphone has.

You could instead show all the content directly and provide a menu with anchors. The menu you can fade or translate into the viewport smoothly on mobile devices.