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

animation

Browse source
This commit is contained in:
Ilya Kantor 2017-03-22 00:04:08 +03:00
parent 97c8f22bbb
commit 3285348787
129 changed files with 732 additions and 693 deletions
Download patch file Download diff file Expand all files Collapse all files

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

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

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

@ -0,0 +1,47 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
cursor: pointer;
}
</style>
<style>
#flyjet {
width: 40px;
height: 24px;
transition: all 3s;
}
#flyjet.growing {
width: 400px;
height: 240px;
}
</style>
</head>
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
<script>
flyjet.onclick = function() {
let ended = false;
flyjet.addEventListener('transitionend', function() {
if (!ended) {
ended = true;
alert('Готово!');
}
});
flyjet.classList.add('growing');
}
</script>
</body>
</html>

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

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
img {
cursor: pointer;
}
</style>
<style>
#flyjet {
width: 40px;
/* -> 400px */
height: 24px;
/* -> 240px */
}
</style>
</head>
<body>
<img id="flyjet" src="https://js.cx/clipart/flyjet.jpg">
</body>
</html>

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

@ -0,0 +1,15 @@
importance: 5
---
# Анимировать самолёт (CSS)
Реализуйте анимацию, как в демке ниже (клик на картинку):
[iframe src="solution" height=300]
- Изображение растёт при клике с 40x24px до 400x240px .
- Продолжительность анимации: 3 секунды.
- По окончании вывести "Готово!".
- Если в процессе анимации были дополнительные клики -- они не должны ничего "сломать".