67 lines
2.4 KiB
HTML
67 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<title>Flip</title>
|
||
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
|
||
<style>
|
||
.row>div {
|
||
color: #3f87ec;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
dom变动后，dom动画无法通过css直接处理，需要js来处理。<br/>
|
||
做一个简易的封装，方便研究实现原理。
|
||
<div class="row">
|
||
<div data-id="1">第1行</div>
|
||
<div data-id="2">第2行</div>
|
||
<div data-id="3">第3行</div>
|
||
<div data-id="4">第4行</div>
|
||
<div data-id="5">第5行</div>
|
||
<div data-id="6">第6行</div>
|
||
<div data-id="7">第7行</div>
|
||
<div data-id="8">第8行</div>
|
||
<div data-id="9">第9行</div>
|
||
</div>
|
||
|
||
<button onclick="flip()">flip动画</button>
|
||
</body>
|
||
<script>
|
||
function flip() {
|
||
var dom_row = document.querySelector('.row');
|
||
var ani = new ciyanidom(dom_row.children, 'data-id');
|
||
for (var i = 0; i < 5; i++) {
|
||
//随机选择两个元素交换位置
|
||
dom_row.insertBefore(dom_row.children[Math.floor(Math.random() * dom_row.children.length)], dom_row.children[Math.floor(Math.random() * dom_row.children.length)]);
|
||
}
|
||
ani.animate();
|
||
}
|
||
function ciyanidom(doms, key) {
|
||
var anis = {};
|
||
for (var i = 0; i < doms.length; i++) {
|
||
var rect = doms[i].getBoundingClientRect();
|
||
var id = doms[i].getAttribute(key);
|
||
anis[id] = { l: rect.left, t: rect.top };
|
||
}
|
||
this.animate = function () {
|
||
for (var i = 0; i < doms.length; i++) {
|
||
var id = doms[i].getAttribute(key);
|
||
var ani = anis[id];
|
||
var rect = doms[i].getBoundingClientRect();
|
||
doms[i].style.transition = '';
|
||
doms[i].style.transform = 'translate(' + (ani.l - rect.left) + 'px, ' + (ani.t - rect.top) + 'px)';
|
||
(function (idx) {
|
||
setTimeout(function () { //可用requestAnimationFrame替代，下一帧(16ms后)开始动画
|
||
doms[idx].style.transition = 'transform 1s';
|
||
doms[idx].style.transform = '';
|
||
}, 0);
|
||
})(i);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</html> |