CSS/JS动画基础：让元素动起来你知道几种方式？
2021-01-24 本文已影响0人
microkof
前言
今天用尽可能多的方法让元素动起来，具体说，向右平移100像素。
以下每一项技术都不会深入讲解，请网上另外了解。
一、transform + translate + transition
“trans”三剑客必须合起来用。transform: translate(100px, 0)表示向右平移100px，transition: transform 1s ease-in-out 0.1s;表示transform属性的值的过渡需要用时1秒，以及延时0.1秒开始，以及使用ease-in-out运动效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 50px;
transition: transform 1s ease-in-out 0.1s;
}
</style>
</head>
<body>
<div class="box">我是容器</div>
<button>动起来！</button>
<script>
document.querySelector('button').onclick = function() {
document.querySelector('.box').style.transform = 'translate(100px, 0)';
};
</script>
</body>
</html>
二、animation + keyframes
这个例子是修改margin-left，你也可以修改left之类的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@keyframes mymove {
from {margin-left: 0px;}
to {margin-left: 200px;}
}
.box {
width: 200px;
height: 50px;
animation: mymove 1s ease-in-out 0.1s 1 normal forwards paused;
}
</style>
</head>
<body>
<div class="box">我是容器</div>
<button>动起来！</button>
<script>
document.querySelector('button').onclick = function() {
document.querySelector('.box').style.animationPlayState = 'running';
};
</script>
</body>
</html>
三、requestAnimationFrame为代表的延时器
尽管setTimeout和setInterval也可以实现，但推荐requestAnimationFrame，所以我也只以requestAnimationFrame举例。
requestAnimationFrame的缺点是不能简便实现timing-function，也就是linear、ease之类的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">我是容器</div>
<button>动起来！</button>
<script>
const box = document.querySelector('.box');
function mymove(number) {
if (number <= 100) {
box.style.marginLeft = number + 1 + 'px'; //每一帧向右移动1px
requestAnimationFrame(() => mymove(number + 1));
}
}
document.querySelector('button').onclick = function() {
requestAnimationFrame(() => mymove(0));
};
</script>
</body>
</html>
四、el.animate()
animate方法是绑定在元素上的方法，可以以js编程方式执行动画。
我不知道它跟CSS动画相比哪个更好，但是可以肯定的是，越复杂的动画越应该使用js编程。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box {
width: 200px;
height: 50px;
}
</style>
</head>
<body>
<div class="box">我是容器</div>
<button>动起来！</button>
<script>
const box = document.querySelector('.box');
var keyframes = [
{
marginLeft: '0'
},
{
marginLeft: '100px'
}
];
document.querySelector('button').onclick = function() {
box.animate(keyframes, {
iterations: 1,
iterationStart: 0,
delay: 0,
endDelay: 0,
duration: 1000,
fill: 'forwards',
easing: 'ease-out',
});
};
</script>
</body>
</html>
