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

16 lines
679 B
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

CSS-код для анимации одновременно `width` и `height`:
```css
/* исходный класс */
#flyjet {
transition: all 3s;
}
/* JS добавляет .growing *.
#flyjet.growing {
width: 400px;
height: 240px;
}
```
Небольшая тонкость с окончанием анимации. Соответствующее событие `transitionend` сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.