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.

8
5-animation/2-css-animations/2-animate-logo-bezier-css/solution.md
View file

@ -1,7 +1,7 @@
Для такой анимации необходимо подобрать правильную кривую Безье.
We need to choose the right Bezier curve for that animation. It should have `y>1` somewhere for the plane to "jump out".
Чтобы она выпрыгивала вверх, обе опорные точки можно вынести по `y>1`, например: `cubic-bezier(0.25, 1.5, 0.75, 1.5)` (промежуточные опорные точки имеют `y=1.5`).
For instance, we can take both control points with `y>1`, like: `cubic-bezier(0.25, 1.5, 0.75, 1.5)`.
Её график:
The graph:
![](bezier-up.png)
![](bezier-up.png)

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

@ -15,7 +15,7 @@
height: 24px;
transition: all 3s cubic-bezier(0.25, 1.5, 0.75, 1.5);
}
#flyjet.growing {
width: 400px;
height: 240px;
@ -25,14 +25,14 @@
<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() {
flyjet.classList.add('growing');
}
};
</script>
</body>
</html>
</html>

8
5-animation/2-css-animations/2-animate-logo-bezier-css/task.md
View file

@ -2,12 +2,12 @@ importance: 5
---
# Анимировать самолёт с перелётом (CSS)
# Animate the flying plane (CSS)
Модифицируйте решение предыдущей задачи <info:task/animate-logo-css>, чтобы в процессе анимации изображение выросло больше своего стандартного размера 400x240px ("выпрыгнуло"), а затем вернулось к нему.
Modify the solution of the previous task <info:task/animate-logo-css> to make the plane grow more than it's original size 400x240px (jump out), and then return to that size.
Должно получиться как здесь (клик на картинку)
Here's how it should look (click on the plane):
[iframe src="solution" height=350]
В качестве исходного документа возьмите решение предыдущей задачи.
Take the solution of the previous task as the source.