jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

ok

Browse source
This commit is contained in:
Ilya Kantor 2017-03-22 11:35:49 +03:00
parent 3285348787
commit aa521b9090
18 changed files with 194 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

9
5-animation/2-css-animations/1-animate-logo-css/solution.md
View file

@ -1,16 +1,17 @@
CSS-код для анимации одновременно `width` и `height`:
CSS to animate both `width` and `height`:
```css
/* исходный класс */
/* original class */
#flyjet {
transition: all 3s;
}
/* JS добавляет .growing *.
/* JS adds .growing */
#flyjet.growing {
width: 400px;
height: 240px;
}
```
Небольшая тонкость с окончанием анимации. Соответствующее событие `transitionend` сработает два раза -- по одному для каждого свойства. Поэтому, если не предпринять дополнительных шагов, сообщение из обработчика может быть выведено 2 раза.
Please note that `transitionend` triggers two times -- once for every property. So if we don't perform an additional check then the message would show up 2 times.

8
5-animation/2-css-animations/1-animate-logo-css/solution.view/index.html
View file

@ -14,7 +14,7 @@
height: 24px;
transition: all 3s;
}
#flyjet.growing {
width: 400px;
height: 240px;
@ -24,7 +24,7 @@
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
<script>
flyjet.onclick = function() {
@ -34,7 +34,7 @@
flyjet.addEventListener('transitionend', function() {
if (!ended) {
ended = true;
alert('Готово!');
alert('Done!');
}
});
@ -44,4 +44,4 @@
</body>
</html>
</html>

6
5-animation/2-css-animations/1-animate-logo-css/source.view/index.html
View file

@ -12,7 +12,7 @@
#flyjet {
width: 40px;
/* -> 400px */
height: 24px;
/* -> 240px */
}
@ -21,9 +21,9 @@
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<img id="flyjet" src="https://en.js.cx/clipart/flyjet.jpg">
</body>
</html>
</html>

13
5-animation/2-css-animations/1-animate-logo-css/task.md
View file

@ -2,14 +2,13 @@ importance: 5
---
# Анимировать самолёт (CSS)
# Animate a plane (CSS)
Реализуйте анимацию, как в демке ниже (клик на картинку):
Show the animation like on the picture below (click the plane):
[iframe src="solution" height=300]
- Изображение растёт при клике с 40x24px до 400x240px .
- Продолжительность анимации: 3 секунды.
- По окончании вывести "Готово!".
- Если в процессе анимации были дополнительные клики -- они не должны ничего "сломать".
- The picture grows on click from 40x24px to 400x240px.
- The animation takes 3 seconds.
- At the end output: "Done!".
- During the animation process, there may be more clicks. They shouldn't "break" anything.