26 окт. 2012 г.

CSS3 transition: height? Бесполезен!

CSS3 transitions конечно задумка хорошая, но бочку мёда губит ложка дёгтя...

Был у меня виджет для служебных сообщений, появляющихся и исчезающих в углу окна браузера. И была у меня простенькая анимация на JavaScript, которая сворачивала сообщение с его начальной высоты до нуля, чтобы потом удалить его, так сказать 1. с глаз долой, 2. из сердца вон. И возжелал я выкинуть весь код анимации, заменив его на CSS transition и присвоение класса в скрипте, примерно вот так:

/* CSS */
.collapsed {
  height: 0;
  transition: all 1s;
}

/* JS */
element.className = "collapsed";
Element.remove.delay(1, element);

Казалось бы, чего проще? Браузер сам должен плавненько высоту сообщения до нуля уменьшить, а потом элемент сообщения можно спокойно удалить.

Ан нет, не тут-то было. Никакой плавности. Высота сообщения сначала рывком уменьшалась примерно наполовину, и только затем начиналась хоть какая-то плавность. Мучения в стиле "мартышка и очки" продолжались примерно полчаса, пока не поискал на StackOverflow.

Суровая правда жизни: transition: height работает только с числовыми значениями height, на height: auto в W3C чихать хотели, разработчики Firefox переводят стрелки на W3C, как никогда вдруг озаботившись поддержанием никому не нужной буквы стандарта, разработчики WebKit также кивают на стандарт и какие-то свои внутренние проблемы и тоже чихать на всех хотели:
My own preference would be (for simplicity) to just stick with transitioning on the computed value and to just say "Tough" to people who want to animate width this way, but maybe others disagree.  We continue to get bugs in WebKit from confused people trying to animate auto widths to fixed values (or percents to fixed values) and not understanding why it doesn't work.
Остаётся только недоумевать
I'm probably not understanding it, but it seems weird that every Javascript library in the world that does this has it figured out, but a hardware accelerated implementation can't?
да пользоваться скриптом, как и раньше - работало, работает и будет работать.

Комментариев нет:

Отправить комментарий