剪切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描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

随机推荐

Gym 101128J Saint John Festival（凸包 + 二分判点和凸包关系）题解
题意:给你一堆黑点一堆红点,问你有最多几个黑点能找到三个红点,使这个黑点在三角形内? 思路:显然红点组成的凸包内的所有黑点都能做到.但是判断黑点和凸包的关系朴素方法使O(n^2),显然超时.那么我现在 ...
深入理解gradle中的task
目录简介定义task tasks 集合类 Task 之间的依赖定义task之间的顺序给task一些描述 task的条件执行 task rule Finalizer tasks 总结深入理解g ...
no need jQuery anymore & You don't need jQuery anymore!
no need jQuery anymore & You don't need jQuery anymore! "use strict"; /** * * @author ...
视屏剪辑软件 & free video editor
视屏剪辑软件 & free video editor purpose add animation keyframe to tutorials video vlog demos tutorial ...
js assert
js assert console.assert The console.assert() method writes an error message to the console if the a ...
javascript disable scroll event
javascript disable scroll event Document: scroll event https://developer.mozilla.org/en-US/docs/Web/ ...
taro list render bug
taro list render bug 列表渲染 https://taro-docs.jd.com/taro/docs/list.html not support jsx map 垃圾微信 cons ...
useState & useEffect
useState & useEffect https://overreacted.io/zh-hans/a-complete-guide-to-useeffect/ https://react ...
Baccarat流动性挖矿是如何改进自动化做市商的痛点的？
Baccarat自上线至今已经有两个多月的时间,尤其代币BGV引来了无数投资者的注意.同时也有越来越多的投资者开始关注到Baccarat本身,Baccarat采取的AMM机制,与其他的DeFi项目所采 ...
ROS1与ROS2对比简述
资料参考: https://blog.csdn.net/Fourier_Legend/article/details/106319000

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

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

随机推荐

热门专题