renovations

5-animation/2-css-transitions/1-animate-logo-css/solution.md

@@ -1,28 +1,16 @@
-# Алгоритм
-
-Анимируйте одновременно свойства `left/top` и `width/height`.
-
-Чтобы в процессе анимации таблица сохраняла геометрию -- создайте на месте `IMG` временный `DIV` фиксированного размера и переместите `IMG` внутрь него. После анимации можно вернуть как было.
-
-Для начала анимации - добавьте класс изображению:
 
+CSS-код для анимации одновременно `width` и `height`:
 ```css
-.growing {
-  /* все свойства анимируются 3 секунды */
-  -webkit-transition: all 3s;
-  -moz-transition: all 3s;
-  -o-transition: all 3s;
-  -ms-transition: all 3s;
+/* исходный класс */
+#flyjet {
+  transition: all 3s;
+}
+
+/* JS добавляет .growing *.
+#flyjet.growing {
+  width: 400px;
+  height: 240px;
 }
 ```
 
-При этом, чтобы анимация началась, может понадобиться отложить установку класса и новых свойств через `setTimeout(.., 0)`.
-
-Для отлова конца анимации используйте событие `on<browser>TransitionEnd`. Оно сработает несколько раз, для каждого свойства, поэтому чтобы обработчик не вывел "OK" много раз -- можно обрабатывать окончание только при одном `event.propertyName`.
-
-# Похожая задача
-Аналогичная задача, решённая средствами JS: [](/task/animate-logo).
-
-# Решение
-
-[edit src="solution" task/]
+Небольшая тонкость с окончанием анимации. Соответствующее событие `transitionend` сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.