Размах анимации в CSS3

Question

В настоящее время я работаю над платформой для мобильных приложений, написанной на HTML 5, CSS3 и jQuery.Для разметки «экранов» у меня есть следующий макет:

<div class="page" id="home">
    <!-- some content is here... -->
</div>
<div class="page" id="lists">
    <!-- some more content is here... -->
</div>

В настоящее время я использую jQuery, чтобы обнаружить первый элемент div на странице и установить его атрибут class как current.Затем у меня есть следующее объявление CSS, которое скрывает что-либо, кроме page.current:

div.page {
    display: none;
}
    div.page.current {
        display: block;
    }

Всякий раз, когда браузер обнаруживает событие изменения хеша (window.onhashchange), я запускаю следующий jQuery:

if(window.location.hash)
{
    var the_hash = window.location.hash.substring(1);
    if($('#' + the_hash).length > 0)
    {
        $('.current').removeClass('current');
        $('#' + the_hash).addClass('current');
    }
}
else
{
    $('div').eq(0).addClass('current');
}

Который отлично работает при отображении любого элемента привязки, по которому щелкнули.Однако теперь я хотел бы создать CSS-переход (что-то простое, например, слайд-переход).Я знаю, что мог бы добиться этого, используя jQuery и animate(), но я бы предпочел использовать полностью CSS3-анимацию (что-то вроде переходных преобразований), потому что iOS обеспечивает аппаратное ускорение для этих анимаций.

Может кто-нибудь указатьменя в правильном направлении относительно того, как, с этой разметкой я мог бы добавить анимацию, чтобы стереть текущий div справа налево, в то же время показывая новый?

Answer 1

Самый простой способ, вероятно, состоит в том, чтобы добавить еще один класс для каждой внеэкранной страницы, такой как .left и .right, который размещает страницу прямо за экраном на этой стороне, возможно, используя свойство CSS left:.

Чтобы вывести страницу на экран, вы должны удалить класс .left и изменить его на .current.

Для анимации перехода вам понадобится правило CSS для класса .page, например:

-webkit-transition: left 1s linear;