Есть ли обходной путь CSS для ошибки Opera с переходом видимости?

Question

Вот скрипка для запуска: http://jsfiddle.net/kizu/A7QX9/

Проблема: в Opera, когда вы анимируете переход для свойства visibility (обычно вместе с opacity), он не анимируется должным образом: visibility изменяется всегда в конце перехода, поэтому, когда блок кажется, что это не так гладко.

Итак, вопрос: есть ли обходной путь только для CSS для этой ошибки Opera?

Answer 1

После того, как я сформулировал вопрос и немного подумал, я сам нашел ответ.

И нашел решение.

Итак, пошагово:

1. Давайте рассмотрим случай, когда вам нужно показать блок, который скрыт в начале.
2. Когда вы переключаете opacity и visibility с переходом,блок остается с visibility: hidden, пока происходит переход.Таким образом, вам не нужно использовать переход для visibility.
3. Но когда вы снова скрываете блок, вам нужно переключить visibility в конце перехода, поэтому вам нужен переходздесь, по-видимому.
4. Таким образом, в селекторе, где скрыт блок, вы должны иметь переход для opacity, а в селекторе, где он показан, переход не требуется.

Вот скрипка, которую я сделал с этим решением: http://jsfiddle.net/kizu/A7QX9/1/

Answer 2

Текущая реализация переходов в Opera основана на более старой версии спецификации , в которой говорится, что для переходной видимости "1" видим ", а все остальные значения" скрыты "."

Так что, если вы попытаетесь перейти от «скрытого» к «видимому», вы не увидите элемент, пока нижележащий диапазон 0-1, представляющий переход, не достигнет значения 1. В то же время, если вы переходите от «видимого» к «скрытому», то элемент исчезнет, ​​как только начнется переход, так как значение будет <1. </p>

Ожидаемое поведение указано в «черновой» версии спецификации , в которой говорится, что «0 скрыто», а все остальные значения «видимы». *

Хорошая новость - Opera 12 будет содержать исправление для этой ошибки. Ожидайте увидеть тестовую сборку с исправлением в Desktop Team blog в ближайшее время.