Проблемы с webkit translate3d (peek-thru) - PullRequest
Новая
       44

Проблемы с webkit translate3d (peek-thru)

7 голосов
/ 03 июля 2011

Я создаю приложение для iOS с PhoneGap.Я использую CSS-анимацию translate3d для создания эффекта переворота.

Это прекрасно работает на более простых элементах ... DIV с передним / задним делением и, возможно, дополнительным интервалом или двумя.

Но когда я пытаюсь перевернуть больший элемент ... а именновесь экран, я получаю перерисовки глюков.Что произойдет, как только я поменяю класс css, чтобы начать переход, части «нижнего» div выскакивают через «верхний» div, затем происходит переворот, затем они снова всплывают.И это не весь элемент, который проходит сквозь ... это половина элемента, разделенная вдоль оси, на которой я делаю вращательное вращение 3d.

Какие-нибудь идеи или теории относительно того, что может быть причиной этого?Это происходит так же, как на iPad, как в приложении, так и на рабочем столе в Safari, поэтому, похоже, проблема с webkit.

Могут ли быть некоторые проблемы с CSS?Или же вы пытаетесь сделать полноэкранное вращение translate3d со сложными вложенными элементами с большими фоновыми изображениями, которые больше, чем Safari может обработать?

ОБНОВЛЕНИЕ 1:

Я добился прогресса в сужениипроблема.

Происходит то, что элементы, которые «просматривают», когда я выполняю переворачивание translate3d, оказываются дочерними элементами, которые ранее были расположены с помощью translate3d.

Моя структура «страницы»что я хочу перейти с translate3d: 

<div id="frontbackwrapper">
    <div id="front">    
    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->

Это работает само по себе.Передний div заменяется на задний div с эффектом переворачивания карты.

Проблема в том, что до полного переворачивания страницы я уже анимировал некоторые элементы внутри #front div с помощью translate3d: 

<div id="frontbackwrapper">
    <div id="front">  

        <div class="modal"></div>  

    </div><!--/front-->
    <div id="back">  
    </div><!--/back-->
</div><!--/frontbackwrapper-->

Пример CSS: 

.modal {
    width: 800px;
    height: 568px;
    position: absolute; 
    left: 112px;
    z-index: 100;
    -webkit-transition-duration: 1s;
    -webkit-transform: translate3d(0,-618px,0); /* set off screen by default */
 }
.modal.modalOn {
    -webkit-transform: translate3d(0,80px,0); /* slides the div into place */
 }

Если - вместо использования translate3d - я просто переставлю div в стиле top или преобразую свойство top, у меня не будет проблемы с просмотром.Конечно, это означает, что я должен отказаться от гладкой анимации или аппаратного ускорения, соответственно.

На данный момент это похоже на ошибку веб-набора.Я буду продолжать играть с этим.Если кто-то сталкивался с этим раньше и нашел обходной путь, я весь в ушах!

Ответы [ 2 ]

6 голосов
/ 07 июля 2011

решение!После ночи сна я размышлял над виновником и что с ним делать.Это не обязательно анимация дочернего элемента с помощью translate3d, а скорее лицо, которое у переведенного элемента имеет то свойство CSS, когда его родительский элемент анимируется с помощью translate3d.

Исправление заключается в том, чтобы сначала анимироватьдочерний элемент, затем удалите стиль перевода все вместе.

Структура CSS теперь выглядит следующим образом: 

/* default class for the start of your element */
.modal-startposition {
  -webkit-transition-duration: 1s;
  -webkit-transform: translate3d(0,-618px,0);
  }

/* add this class via jQuery to then allow
   webkit to animate the element into position */
.modal-animateposition {
  -webkit-transform: translate3d(0,80px,0);
}

/* when animation is done, remove the above class
   and replace it with this */
.modal-endposition {
  top: 80px;
}

И некоторые примеры jQuery: 

//[attach a click event to trigger and then...]
$myModal
    .addClass("modal-animateposition")
    .on('webkitTransitionEnd',function () {
         $myModal
            .removeClass('modal-startposition')
            .removeClass('modal-animateposition')
            .addClass('modal-endposition');
    });

Немного утомительно, но полностью устраняет проблему перерисовки экрана.

РЕДАКТИРОВАТЬ: Исправлена ​​опечатка

1 голос
/ 03 декабря 2012

DA, Я узнал кое-что из этого, спасибо. Также, обратите внимание на атрибуты css, translate3d и left. Перевод и позиционирование немного отличаются. Проверьте это, переведите элемент 100px по оси x, установите его атрибут стиля left в 0px. Убедитесь, что он будет расположен в 0px на оси x от текущей точки перевода (начиная с 100px на оси x).

Это приводит к математическим ошибкам в алгоритмах перетаскивания и анимации и их легко заметить (сбои перерисовки, пропуски, восстановление позиции) и становится проблемой, потому что translate3d больше не обновляет элементы стиля offsetLeft или 'left' (для предотвращения перекомпоновки) (для оптимизации), таким образом, синтаксический разбор элементов, фактически оставленных слева, основан на знании, использовался ли translate3d или left. Если вы разработчик игры, отслеживание x, y во внутренних переменных - это способ оставаться в синхронизации с положением элементов. Надеюсь, это поможет больше.

...