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

components

Browse source
This commit is contained in:
Ilya Kantor 2019-04-02 14:01:44 +03:00
parent 304d578b54
commit 6fb4aabcba
344 changed files with 669 additions and 406 deletions
Download patch file Download diff file Expand all files Collapse all files

17
7-animation/2-css-animations/1-animate-logo-css/solution.md Normal file
View file

@ -0,0 +1,17 @@
CSS to animate both `width` and `height`:
```css
/* original class */
#flyjet {
transition: all 3s;
}
/* JS adds .growing */
#flyjet.growing {
width: 400px;
height: 240px;
}
```
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.

47
7-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://en.js.cx/clipart/flyjet.jpg">
<script>
flyjet.onclick = function() {
let ended = false;
flyjet.addEventListener('transitionend', function() {
if (!ended) {
ended = true;
alert('Done!');
}
});
flyjet.classList.add('growing');
}
</script>
</body>
</html>

29
7-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://en.js.cx/clipart/flyjet.jpg">
</body>
</html>

14
7-animation/2-css-animations/1-animate-logo-css/task.md Normal file
View file

@ -0,0 +1,14 @@
importance: 5
---
# Animate a plane (CSS)
Show the animation like on the picture below (click the plane):
[iframe src="solution" height=300]
- The picture grows on click from `40x24px` to `400x240px` (10 times larger).
- The animation takes 3 seconds.
- At the end output: "Done!".
- During the animation process, there may be more clicks on the plane. They shouldn't "break" anything.