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

up

Browse source
This commit is contained in:
Ilya Kantor 2017-04-21 09:34:49 +02:00
parent 7a51c05ded
commit 0576ea79d8
18 changed files with 375 additions and 109 deletions
Download patch file Download diff file Expand all files Collapse all files

0
5-animation/2-css-animations/3-animate-circle/solution.md Normal file
View file

41
5-animation/2-css-animations/3-animate-circle/solution.view/index.html Normal file
View file

@ -0,0 +1,41 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.circle {
transition-property: width, height, margin-left, margin-top;
transition-duration: 2s;
position: fixed;
transform: translateX(-50%) translateY(-50%);
background-color: red;
border-radius: 50%;
}
</style>
</head>
<body>
<button onclick="showCircle(150, 150, 100)">showCircle(150, 150, 100)</button>
<script>
function showCircle(cx, cy, radius) {
let div = document.createElement('div');
div.style.width = 0;
div.style.height = 0;
div.style.left = cx + 'px';
div.style.top = cy + 'px';
div.className = 'circle';
document.body.append(div);
setTimeout(() => {
div.style.width = radius * 2 + 'px';
div.style.height = radius * 2 + 'px';
}, 0);
}
</script>
</body>
</html>

28
5-animation/2-css-animations/3-animate-circle/source.view/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.circle {
transition-property: width, height, margin-left, margin-top;
transition-duration: 2s;
position: fixed;
transform: translateX(-50%) translateY(-50%);
background-color: red;
border-radius: 50%;
width: 200px;
height: 200px;
top: 150px;
left: 150px;
}
</style>
</head>
<body>
<div class="circle"></div>
</body>
</html>

16
5-animation/2-css-animations/3-animate-circle/task.md Normal file
View file

@ -0,0 +1,16 @@
importance: 5
---
# Animated circle
Create a function `showCircle(cx, cy, radius)` that shows an animated growing circle.
- `cx,cy` are window-relative coordinates of the center of the circle,
- `radius` is the radius of the circle.
Click the button below to see how it should look like:
[iframe src="solution" height=260]
The source document has an example of a circle with right styles, so the task is precisely to do the animation right.