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

650 2 年前
本例子是采用原生js和css3新特性实现的单元格随机改变显示位置,动画简单,本意是学习使用平时实践中少用的'createDocumentFragment'

此例子使用了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>
分类栏目
© 2018邮箱:11407215#qq.comGitHub沪ICP备12039518号-6