Проведите анимацию в CSS3

В настоящее время я работаю над платформой мобильных приложений, написанной в 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 справа налево, в то же время показывая новый?

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

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

Чтобы оживить переход, вам понадобится правило CSS в классе .page например:

 -webkit-transition: left 1s linear; 
  • Получение всех файлов cookie из WKWebView
  • Ошибка теневого распространения в WebKit в iOS 7 на iPad Retina
  • Отключить усиление в WKWebView
  • -webkit-overflow-scrolling: touch не распознается в хроме и на ios
  • `-webkit-overflow-scrolling: touch` сломан для первоначальных внеэкранных элементов в iOS7
  • WKWebView внутри UIScrollView: прокручивание конфликта
  • Включить кеш приложений в WKWebView
  • Что делает <meta name = "viewport" content = "width = device-width"> в ландшафтном режиме на iOS?
  • Каковы последствия использования неподдерживаемого свойства WebKit?
  • Доступ к истории просмотров iphone с помощью частной структуры webkit
  • Почему Apple относится к этим приложениям специально?
  • Давайте будем гением компьютера.