Мерцание видимости лицевой стороны при "переворачивании" ящика с использованием видимости на лицевой стороне

Я использую достаточно простой переход CSS для создания окна, которое "переворачивается", переходя одновременно два divs 180deg. Когда вы находитесь на "спине" коробки, он должен быть слегка прозрачным, чтобы вы могли видеть нижнюю сторону.

У меня это работает довольно легко во всех браузерах, за исключением последних Safari 7 и iOS 7. В Safari 7 анимация мерцает, а задняя карта просто "всплывает" на фронт в конце анимации.

Это кажется ошибкой в рендеринге анимации на более новом Safari. Есть ли способ обхода, чтобы заставить себя вести себя лучше?

Отметьте gifs анимации на Chrome и Safari

Смотрите демонстрацию здесь http://cssdeck.com/labs/flippable-card

Ответ 1

Невозможно протестировать сафари, но аналогичная ошибка произошла в Chrome.

Решение в этом случае состояло бы в том, чтобы переместить назад 1px в z

.card__back { 
    transform: rotateY(180deg) translateZ(1px); 
    backface-visibility: hidden; 
} 

.card--flipped .card__back {
    transform: rotateY(0deg) translateZ(1px); 
}

Это произошло в Chrome, потому что во время анимации был рассчитан пространственный порядок (я имею в виду, положение элементов в 3d-пространстве) и он переопределяет другие факторы.

Как только анимация закончилась, эта система вычислений больше не используется.

Как я уже говорил; cann't test в Safari, поэтому я могу быть уверен, что это решение.

Ответ 2

Поэтому мне удалось воспроизвести поведение в моем текущем Safari и подумал, что это довольно интересно. Вот что я придумал: http://codepen.io/anon/pen/usGCL

В основном задняя сторона уже повернута с помощью -webkit-transform: scaleX(-1); с самого начала.

Таким образом, вам не нужно поворачивать его обратно на 0дег. Теперь вместо того, чтобы листать спереди и сзади, вы просто переворачиваете весь контейнер на 180 градусов, оставляя заднюю часть снова "нормальной". Также z-index должен измениться в процессе, что делает backface-visibility: hidden; избыточным. Я предполагаю, что если модифицировать немного, вы можете использовать еще меньше jQuery, конечно.

ИЗМЕНИТЬ

Ответ Guess Aperçu также в значительной степени то, что вы искали. Просто для удовольствия: http://codepen.io/BenMann/pen/DmjHv

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

Ответ 3

Как упоминалось в вопросе, происходят две вещи:

1. Анимация мерцает: это связано с задержкой нажатия в мобильных браузерах. В принципе, событие щелчка срабатывает 300 мс после физического табуляции элемента. Вы хотите прослушать touchstart, который запускается сразу же на табуляции, но не срабатывает вообще на не-сенсорных интерфейсах (Fastclick - это хороший polyfill, который удаляет эту задержку нажатия в мобильных браузерах, но не влияет на пользовательские интерфейсы без касания.)

Для этого ответа я просто привяжу слушателя к touchstart вместо click (поэтому демонстрацию нужно посмотреть на сенсорном устройстве):

$('.card').on("touchstart", function() {
  $(this).toggleClass('card--flipped');
});

2. Задняя карта просто "выскочит" на фронт в конце анимации: после некоторых экспериментов, похоже, что это происходит, когда transform и backface-visibility оба определены в одном элементе. Чтобы обойти это, я сохранил backface-visibily на .card__back, но положил transform: rotateY(180deg) на .card__front.

Следовательно, .card__front будет перевернуто изначально, а это значит, что .card должен быть первоначально перевернут, чтобы компенсировать это.

Мы также должны определить transform-style: preserve-3d на .card, чтобы transform отображал .card__front и .card__back в трехмерном пространстве (в отличие от сглаживания).

/* Relevant CSS */

.card {
  transition: all 1s ease-in-out;
  transform-style: preserve-3d;
  transform: rotateY(-180deg);
}

.card__front {
  transform: scaleX(-1);
}

.card__back {
  backface-visibility: hidden;
}

.card--flipped {
  transform: rotateY(0);
}

Мобильная DEMO (для просмотра в мобильном Safari или Chrome): http://jsbin.com/aMAwezA/15/

DEMO (для устройств без касания): http://jsbin.com/aMAwezA/16/

EDIT: После дальнейшего тестирования я обнаружил, что transform: rotateY(180deg) на .card__front вызывает некоторые мерцания в Chrome. Замена его на transform: scaleX(-1) решила проблему. Обновлен CSS и демонстрационная ссылка выше, которая должна работать как на мобильных Safari, так и на Chrome.

Ответ 4

Вам нужно добавить два времени перехода, одно для -webkit-backface-visibility и другое для -webkit-transform.

Если вы попытаетесь установить задержку перехода на 0 секунд, вы сразу увидите изменение цвета, как хотите.

Попробуйте изменить правило перехода, например

transition: -webkit-transform 1s ease-in-out, -webkit-backface-visibility 0s ease-in-out;

Или переопределить переход 1сек только для видимости обратной стороны.

ИЗМЕНИТЬ

Без использования -webkit-backface-visibility, который кажется багги, я думаю, что у меня есть что-то, играющее с display в backcard.

См. Демо (Протестировано в Safari 7 iOs 7.0.2 и Mavericks)