en.javascript.info/5-animation/2-css-transitions/1-animate-logo-css/solution.md
2015-03-12 10:26:02 +03:00

679 B
Raw Blame History

CSS-код для анимации одновременно width и height:

/* исходный класс */

#flyjet {
  transition: all 3s;
}
/* JS добавляет .growing *.
#flyjet.growing {
  width: 400px;
  height: 240px;
}

Небольшая тонкость с окончанием анимации. Соответствующее событие transitionend сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.