js与css3:transition实现动画单元格随机排列

此例子使用了ES6中的新增的let命令，请使用支持ES6语法的浏览器查看。

ES6 中 let 命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

DocumentFragment

DocumentFragment 文档碎片节点，相信大多数朋友在平时关注使用很少吧，其实无论是jquery还是vue都使用了文档碎片来进行dom操作dom级别的优化

DocumentFragment节，本身就是一个完整的 DOM 树形结构。它没有父节点，parentNode返回null，但是可以插入任意数量的子节点。它不属于当前文档，操作DocumentFragment节点，要比直接操作 DOM 树快得多。

它一般用于构建一个 DOM 结构，然后把这个 DOM 结构整体插入当前文档。document.createDocumentFragment方法，以及浏览器原生的DocumentFragment构造函数，可以创建一个空的DocumentFragment节点。然后再使用其他 DOM 方法，向其添加子节点。

var docFrag = document.createDocumentFragment();
// 等同于
var docFrag = new DocumentFragment();

DocumentFragment节点本身不能被插入当前文档。当它作为appendChild()、insertBefore()、replaceChild()等方法的参数时，是它的所有子节点插入当前文档，而不是它自身。一旦DocumentFragment节点被添加进当前文档，它自身就变成了空节点（textContent属性为空字符串），可以被再次使用。

var node="";
var fragment = document.createDocumentFragment();
for (var i = 1; i <= 5; i++) {
    node=document.getElementById("textb").cloneNode(true);
    fragment.appendChild(node);
}
document.getElementById("texta").appendChild(fragment);

DocumentFragment节点对象没有自己的属性和方法，全部继承自Node节点和ParentNode接口。也就是说，DocumentFragment节点比Node节点多出以下四个属性。

children：返回一个动态的HTMLCollection集合对象，包括当前DocumentFragment对象的所有子元素节点。
firstElementChild：返回当前DocumentFragment对象的第一个子元素节点，如果没有则返回null。
lastElementChild：返回当前DocumentFragment对象的最后一个子元素节点，如果没有则返回null。
childElementCount：返回当前DocumentFragment对象的所有子元素数量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js与css3:transition实现动画 单元格随机排列</title>
</head>
<body>
<div class="warp" id="warp"></div>
<div style="text-align: center">
    <button type="button" id="chang">chang</button>
</div>
<style>
    * {
        padding: 0px;
        margin: 0px
    }
    .warp {
        position: relative;
        width: 210px;
        height: 210px;
        margin: auto;
        background-color: aliceblue;
        font-size: 0;
    }
    .warp span {
        transition: all linear .5s;
        position: absolute;
        display: inline-block;
        width: 20px;
        height: 20px;
        border: 1px solid #cccccc;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
        overflow: hidden;
    }
</style>
<script>
    let fragment = document.createDocumentFragment();
    for (let i = 0; i < 100; i++) {
        let span = document.createElement('span');
        let text = document.createTextNode(i);
        span.appendChild(text);
        fragment.appendChild(span);
    }
    let warp = document.getElementById('warp');
    warp.appendChild(fragment);
    let spanlist = warp.getElementsByTagName('span');
    let arr = [];
    getpos();
    changpos();
    function getpos() {
        for (let i = 1; i <= 10; i++) {//行
            for (let j = 1; j <= 10; j++) {//列
                let posleft = (i - 1) * 21 + 'px';
                let postop = (j - 1) * 21 + 'px';
                let posi = [posleft, postop]
                arr.push(posi);
            }
        }
    }
    function changpos() {
        for (let i = 0; i < 100; i++) {//行
            elspan = spanlist[i];
            elspan.style.top = arr[i][0];
            elspan.style.left = arr[i][1];
        }
    }
    function changarr() {
        arr.sort(function () {
            return Math.random() > .5 ? -1 : 1;
        })
        changpos();
    }
    document.getElementById('chang').addEventListener('click', changarr);
</script>
</body>
</html>

js与css3:transition实现动画 单元格随机排列

DocumentFragment

js与css3:transition实现动画单元格随机排列