剪切DOM节点中断transition执行【问题】

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

<style>

    a{ text-decoration: none; }

    a:hover{ text-decoration: underline; }

ul{ position: relative; }

li{

    position: absolute;

    transition: 1s top;

}

</style>

</head>

<body>

<!--

上移下移

    需求：

        1）点击上移就将当前的按钮的父级上移一位

        2）当点击第一个时候将当前按钮的父级移动到最后一位

        3）当点击最后一个时候将当前按钮的父级移动到首位

    跨展板：

        移动时带动画

 -->

<ul id="oUl">

    <li>第一项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>

    <li>第二项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>

    <li>第三项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>

    <li>第四项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>

    <li>第五项 <a href="javascript:;">上移</a> <a href="javascript:;">下移</a></li>

</ul>

<script src="getId.js"></script>

<script src="doMove.js"></script>

<script src="main.js"></script>

</body>

</html>

var oUl = $('oUl');

var oLi = oUl.getElementsByTagName('li');

for( var i=0, oLen=oLi.length; i<oLen; i++ ){

    oLi[i].style.top = (i*16 + i*6) + 'px';

}

for(var i=0, oLen=oLi.length; i<oLen; i++){

    oLi[i].getElementsByTagName('a')[0].onclick = function(){

        var returnValue = moveUp( this.parentNode );

        ( !returnValue ) && ( oUl.appendChild( this.parentNode ) );

    }

    oLi[i].getElementsByTagName('a')[1].onclick = function(){

        var oldTop = this.parentNode.style.top;

        // console.log( getSiEle( this.parentNode , 1 ) );

        var nextTop = getSiEle( this.parentNode , 1 ).style.top;

        this.parentNode.style.top = nextTop;

        getSiEle( this.parentNode , 1 ).style.top = oldTop;

        var returnValue = moveDown( this.parentNode ); 

        // console.log( returnValue );

        // ( !returnValue ) && ( insertBefore( this.parentNode , oUl.children[0] ) );

    }

}

function $( v ){

    if(typeof v === 'function'){

        window.onload = v;

    }else if(typeof v === 'string'){

        return document.getElementById( v );

    }else if(typeof v === 'object'){

        return v;

    }

}

function getStyle( obj,attr ){

    var arr = '';

    for(var i=0; i<attr.length; i++){

        if(attr[i] != ' ')

            arr += attr[i];

    }

    return obj.currentStyle ? obj.currentStyle[arr] : getComputedStyle(obj)[arr];

} 

function $class(typeEle,attr){

    var oChild = document.getElementsByTagName(typeEle);

    var arr = [];

    for(var i=0; i<oChild.length; i++){

        if( oChild[i].className == attr ){

            arr.push(oChild[i]);

        }

    }

    return arr;

}

function getSiEle( ele , v ){

    //-1代表查找前一个兄弟元素，1代表查找后一个兄弟元素

    //开始查找前判断本元素是不是第一个元素或最后一个元素，如果是返回false

    //开始查找

    if( v === -1 ){

        v = 'previousSibling'; 

        if( ele.parentNode.children[0] == ele ){

            return false;

        }

    }

    if( v === 1 ){

        v = 'nextSibling';

        if( ele == ele.parentNode.children[ ele.parentNode.children.length-1 ] ){

            return false;

        }

    }

    var theParent = ele[v];

    while( theParent.nodeType != 1 ){

        theParent = theParent[v];

    }

    return theParent;

}

//重新包装一下

function insertBefore( newEle , targetEle ){

    targetEle.parentNode.insertBefore( newEle , targetEle );

}

//向targetEle后面插入一个元素节点

function insertAfter( newEle , targetEle ){

    var tNextSibling = targetEle.nextSibling;

    var targetEleParent = targetEle.parentNode;

    if( tNextSibling ){

        targetEleParent.insertBefore( newEle , tNextSibling );

    }else{

        targetEleParent.appendChild( newEle );

    }

}

//上移

function moveUp( ele ){

    var tSiEle = getSiEle( ele , -1 );

    if( !tSiEle ){

        return false;

    }

    ele.parentNode.insertBefore( ele , tSiEle );

    return true;

}

//下移

function moveDown( ele ){

    var tSiEle = getSiEle( ele , 1 );

    if( !tSiEle ){

        return false;

    }

    insertAfter( ele , tSiEle );

    console.log(555);

    return true;

}

/*

while(true){

    if( oDiv[oDiv.length-1] != 400 ){

        FdoMove(400);

    }else{

        FdoMove(0);

    }

}

function FdoMove(endStep){

    document.onclick = function(){

        clearInterval(attrs.timer);

        attrs.timer = setInterval(function(){

            if(endStep != 0){

                if(  parseInt(oDiv[attrs.i].style.top) == endStep )

                    attrs.i++;

                if( attrs.i < oDiv.length ){

                    doMove( oDiv[attrs.i], 'top', 90, endStep );

                }else{

                    clearInterval(attrs.timer);

                    attrs.timer = null;

                }

            }else{

                if(  parseInt(oDiv[attrs.lastNum].style.top) == endStep )

                    attrs.lastNum--;

                if( attrs.lastNum >= endStep ){

                    doMove( oDiv[attrs.lastNum], 'top', 90, endStep );

                }else{

                    clearInterval(attrs.timer);

                    attrs.timer = null;

                }

            }

        },90);

    }

}*/

当var returnValue = moveDown( this.parentNode ); 这句注释掉，两个li可以顺利过渡，但加上这个，其中一条，就是被剪切的那一条没有过渡效果，瞬间位置变化；

我觉得变化位置的时候，改变的是视觉层的li位置。我这么理解：css里给标签加上transition这个样式，相当于是在位置变换的【初始点】~~【最终点】中间补上了过渡帧，而过渡帧需要基于一样 “东西” ，来做，不可能过渡空气，这个 “东西” 就是DOM节点在浏览器上显示的样子( 把页面看成是由许多不一样大小图片组成的 )，而这个“li图片” 是由DOM生成的，浏览器解析是需要先确定下来DOM树，再根据DOM树把节点画出来，再把画出来的骨架和css合成，就是我们在浏览器上看见的样子，而剪切DOM节点，就要重新确定DOM树，重新和CSS合成生成，就是这个生成过程，【我觉得】：首先是按css设置的优先级先设置好，再解析js，根据js设置的样式去合成。

想这个图，this.parentNode的css文件里的top值是0；getSiEle( this.parentNode , 1 )的css文件里的top值是22px。这两个都是li，css文件里给li设置了 transition: 1s top;【就是当触发的时候，如果top有改变会给它加上过渡动画】，第三句是剪切第一个li到第二个li的下面。这三句话都需要点击才能执行。当点击的时候，两个li改变了【包括，DOM和css合成，再和js合成】，transition也触发了，第一帧顺利走动（可能有两帧，取决于第三句话剪切动作的执行时间），第二帧的时候剪切动作发生了【DOM和css重新合成，DOM再和js重新合成，但第一二句已经不会再执行，它们需要点击触发，所以这里我觉得js是拿上一次的值来用，于是乎，位置设置瞬间完成，生成的 “图片” 和第一帧的完全不一样，transition第二帧起操作的是空气】。

简单一句话就是：对DOM的剪切操作会中断css的transition。

【以上推论纯属个人臆想，属强行解释，没有依据】

剪切DOM节点中断transition执行【问题】的更多相关文章

jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点
css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...
新添加的DOM节点如何实现动画效果
如何给新添加的DOM节点加动画效果最近碰到项目中,在DOM节点中,添加新的 html 后要有动画效果,一直没能很好地理解,尝试了各种方式,终于找出来了简化版结构代码如下使用jq1.9以上版本 ...
深入理解DOM节点操作
× 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点前面的话一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...
深入理解DOM节点类型第四篇——文档片段节点DocumentFragment
× 目录 [1]特征 [2]作用前面的话在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...
JBPM4入门——8.等待节点的分支执行
JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流程图的插件 JBPM4入门——3.JBPM4开发环境的搭建 JBPM4入门—— ...
jQuery修炼心得-DOM节点的插入
1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...
JavaScript函数使用和DOM节点
一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...
jacascript DOM节点——节点关系与操作
前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

随机推荐

os-hackNOS-2（wp5.3本地文件包含 rbash绕过）
一.信息收集直接netdiscover,找到IP是 192.168.56.101 然后端口扫描一波只打开了22和80端口,访问一下80端口,是apache首页,那就继续查目录赛.,发现了一个tsw ...
Linux 驱动框架---驱动中的异步
异步IO是对阻塞和轮询IO的机制补充,所谓异步IO就是在设备数据就绪时主动通知所属进程进行处理的机制.之所以说是异步是相对与被通知进程的,因为进程不知道也无法知道什么时候会被通知:这一机制非常类似于硬 ...
图片转tfrecords
import numpy as np import tensorflow as tf import time import os import cv2 from sklearn.utils impor ...
JavaScript 高级程序设计 (第4版) 思维导图/脑图 All In One
JavaScript 高级程序设计 (第4版) 思维导图/脑图 All In One JavaScript 高级程序设计 (第4版) 思维导图下载 JavaScript 高级程序设计 (第4版) 脑图 ...
Dart Generic All In One
Dart Generic All In One Dart 泛型 https://dart.dev/guides/language/language-tour#generics /** * * @aut ...
Flutter & APP & UI Components
Flutter & APP & UI Components 下拉刷新或者上拉加载 https://github.com/OpenFlutter/flutter_screenutil h ...
React & Desktop App
React & Desktop App https://proton-native.js.org/#/ https://github.com/kusti8/proton-native
创新全球算力生态价值，SPC算力生态强势来袭！
当前,区块链技术已经到了一个新的时代,即3.0时代.在区块链3.0时代,区块链技术迎来了数字经济革命,各行各业也在积极寻找与区块链能够融合的切入点.而随着区块链的愈加成熟,区块链技术也愈加被更多的人应 ...
Angular性能优化实践——巧用第三方组件和懒加载技术
应该有很多人都抱怨过 Angular 应用的性能问题.其实,在搭建Angular项目时,通过使用打包.懒加载.变化检测策略和缓存技术,再辅助第三方组件,便可有效提升项目性能. 为了帮助开发者深入理解和 ...
redis5.* 手动构建集群
1.集群的概念集群是一组相互独立的.通过高速网络互联的计算机,它们构成了一个组,并以单一系统的模式加以管理.一个客户与集群相互作用时,集群像是一个独立的服务器.集群配置是用于提高可用性和可缩放性.当 ...

剪切DOM节点中断transition执行【问题】

剪切DOM节点中断transition执行【问题】的更多相关文章

随机推荐

热门专题