Проведите анимацию в 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 справа налево, в то же время показывая новый?

One Solution collect form web for “Проведите анимацию в CSS3”

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

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

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

 -webkit-transition: left 1s linear; 
  • Получение всех файлов cookie из WKWebView
  • Как остановить MPAVItem сбой моего приложения iOS с видео в моем UIWebView?
  • iOS UIWebView случайно разбивается на WebCore :: FrameTree :: top
  • Удалить 3 пикселя в текстовом поле iOS / WebKit
  • com.apple.WebKit.WebContent drop 113 error: Не удалось найти указанную службу
  • Исправленные элементы не доступны для кликов, когда я быстро прокручиваю нижнюю часть в iOS Safari 9+
  • HTML-разбивка на страницы
  • iOS Отказано в подключении, поскольку оно не указано ни в директиве connect-src, ни в директиве default-src политики безопасности контента
  • Webkit переполнения прокрутки Touch ошибка CSS на iPad
  • Ошибка прокрутки Webkit
  • Рекомендуемая альтернатива webkit для серверных событий на iOS
  • Interesting Posts

    Невозможно получить несколько изображений из видео с помощью MPMoviePlayerController. OSStatus -12433

    UIView в центре UITableViewController

    Как исправить ошибку Xcode «Не удалось найти образ диска для разработчиков» на iOS9.2

    NSDate, сравнивая две даты

    Переопределение с другим типом

    Как передать параметр NSData объективному c-методу, вызванному в swift 3?

    Эффективный способ использования Core Image на iOS?

    iOS, определяющее расстояние между лицом пользователя и устройством с использованием передней камеры

    Позиция заголовка UICollectionView в режиме горизонтального прокрутки с раскладкой

    Как создать и использовать изображение, превышающее разрешение экрана?

    Уровень предварительного просмотра AVFoundation камеры не работает

    Опция «Builds for» в построителе интерфейса

    Проблемы с UIInputViewAudioFeedback-протоколом (enableInputClicksWhenVisible не вызывается)

    iOS: проблема с CocoaPods с помощью Google Analytics и AdMob

    Swift – Получить местное время

    PhoneC: Разработка iOS проста с помощью XCode, Swift3, UITableView, cocatouch, давайте создадим приложения для iPhone, iPad и Macbook.