Обновление
Приносим извинения за то, что не смогли добавить незначительные детали, которые мы также накладываем на множество элементов div
поверх друг друга с z-индексом
.
После дополнительной работы с этой проблемой кажется, что webkit-transform
на самом деле мешает упорядочиванию z-index
, и что реальная проблема не связана с самими анимациями.
] Конец обновления
В настоящее время я работаю над проектом, в котором мы разрабатываем приложение, которое довольно сильно зависит от анимации CSS3. Мы анимируем множество элементов div
с помощью -webkit-transform
и -webkit-transition
.
Все хорошо, до сегодняшнего дня, когда все анимируемых элементов страницы исчезли. Похоже, что Google Chrome обновился с 12.xx до 13.0.782.107m , и теперь, внезапно, свойства CSS3 с префиксами -webkit
перестали работает, а элементы, к которым применено это свойство, больше не отображаются. Удаление свойства -webkit-transform
через отладчик Chrome делает элементы снова видимыми.
Кто-нибудь еще испытывал те же проблемы или знает, как решить эту проблему?
Я могу добавить, что я мы попытались удалить только префиксы -webkit
(оставив только transform
), который затем показывает недостающие элементы, но тогда это не будет анимировать элементы вообще, как CSS3 свойство преобразование
не поддерживается.
Я также пробовал использовать el.style.webkitTransform
и el.style.WebkitTransform
, но безуспешно.
] Передам пример кода для объяснения. Желаемый результат - удалить sq1
и открыть sq2
.
HTML:
<div id="sq1" style="z-index:10;">
<div id="sq2" style="z-index:5;">
JS
/* fetch the element */
var el = document.getElementById("sq1");
/* apply CSS */
el.style["-webkit-transition"] = "-webkit-transform 500ms linear";
el.style["-webkit-transform"] = "translate3d(30px, 30px, 0px)";