<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>2.2 移动端动画</title>
<style>
* {
padding: 0;
margin: 0;
}
.box {
width: 100px;
height: 100px;
background-color: red;
/*position: absolute;
transition: left margin-left 1s;*/
/*transition: transform 1s;*/
}
</style>
</head>
<body>
<button id="btn">start</button>
<div id="box" class="box"></div>
<script>
// var boxEl = document.getElementById('box'),
// btnEl = document.getElementById('btn');
// var dest = window.innerWidth - 100;
// btnEl.addEventListener('click', function () {
// move(boxEl, dest);
// }, false);
// function move(el, position) {
// el.style.transform = 'translate3d(' + position +'px, 0, 0)';
// }
var requestAnimationFrame = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function (fn) {
setTimeout(fn, 16);
};
var boxEl = document.getElementById('box'),
btnEl = document.getElementById('btn');
var dest = window.innerWidth - 100,
speed = 10,
position = 0;
btnEl.addEventListener('click', function () {
requestAnimationFrame(step);
}, false);
function move(el, position) {
el.style.transform = 'translate3d(' + position +'px, 0, 0)';
}
function step() {
if (position < dest) {
position += speed;
move(boxEl, position);
requestAnimationFrame(step);
} else {
position = dest;
move(boxEl, position);
}
}
</script>
</body>
</html>