<!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执行【问题】的更多相关文章

  1. jQuery学习-css、class操作、动画方法的运用、jQ操作Dom节点

    css操作(设置单个/多个样式.获取样式) //修改单个属性:括号之中直接是需要修改的样式名,值 css(name,value) //例:$("#one").css("b ...

  2. 新添加的DOM节点如何实现动画效果

    如何给新添加的DOM节点加动画效果 最近碰到项目中,在DOM节点中,添加新的 html 后 要有动画效果,一直没能很好地理解,尝试了各种方式,终于找出来了 简化版结构 代码如下 使用jq1.9以上版本 ...

  3. 深入理解DOM节点操作

    × 目录 [1]创建节点 [2]插入节点 [3]移除节点[4]替换节点[5]复制节点 前面的话 一般地,提起操作会想到“增删改查”这四个字,而DOM节点操作也类似地对应于此,接下来将详细介绍DOM的节 ...

  4. 深入理解DOM节点类型第四篇——文档片段节点DocumentFragment

    × 目录 [1]特征 [2]作用 前面的话 在所有节点类型中,只有文档片段节点DocumentFragment在文档中没有对应的标记.DOM规定文档片段(document fragment)是一种“轻 ...

  5. JBPM4入门——8.等待节点的分支执行

    JBPM入门系列文章: JBPM4入门——1.jbpm简要介绍 JBPM4入门——2.在eclipse中安装绘制jbpm流程图的插件 JBPM4入门——3.JBPM4开发环境的搭建 JBPM4入门—— ...

  6. HTML DOM节点

    在 DOM 树中,基本上一切都是节点.每个元素在最底层上都是 DOM 树中的节点.每个属性都是节点.每段文本都是节点.甚至注释.特殊字符(如版权符号 ©).DOCTYPE 声明(如果 HTML 或者 ...

  7. jQuery修炼心得-DOM节点的插入

    1. 内部插入append()与appendTo() append:这个操作与对指定的元素执行原生的appendChild方法,将它们添加到文档中的情况类似. appendTo:实际上,使用这个方法是 ...

  8. JavaScript函数使用和DOM节点

    一.函数的声明与调用 1.函数声明的格式: function 函数名(参数1, 参数2,....){ 函数体代码 return 返回值:} 2.函数的调用:①直接调用:函数名(参数1的值,参数2的值, ...

  9. jacascript DOM节点——节点关系与操作

    前言:这是笔者学习之后自己的理解与整理.如果有错误或者疑问的地方,请大家指正,我会持续更新! 节点关系 DOM可以将任何HTML描绘成一个由多层节点构成的结构.每个节点都拥有各自的特点.数据和方法,也 ...

随机推荐

  1. VSCode Plugin & Auto File Header Comments Generator

    VSCode Plugin & Auto File Header Comments Generator Xcode SwiftUI // // ContentView.swift // Mem ...

  2. whiteboard & coding interview practice

    whiteboard & coding interview practice 白板 & 面试 & 编码练习 Algorithm https://www.freecodecamp ...

  3. js & Event Bus

    js & Event Bus global event handler (broadcast / trigger / emit / listen ) // 实现一个 EventBus类,这个类 ...

  4. 「NGK每日快讯」12.23日NGK第50期官方快讯!

  5. 一文助你了解NGK商城

    按照NGK的发展逻辑,将会在2021年上半年上线链商商城,解决传统消费行业真伪难辨的弊端,之后,将会推出小额支付功能,让NGK真正成为结算中的数字资产,目前两者落地性应用已经在开发内测阶段中,期初的部 ...

  6. 微信小程序(三)-事件绑定

    小程序事件绑定 https://developers.weixin.qq.com/miniprogram/dev/framework/view/two-way-bindings.html 1.数据 / ...

  7. 前端传递数据到后台的两种方式;创建一个map或者创建一个FormData对象

    一.构建一个map getAllDeptAllUsers(){ const modleCode = {'auditMenuId': this.auditMenuId, 'enterpriseId': ...

  8. python中yield的用法详解——最简单，最清晰的解释

    转载自https://blog.csdn.net/mieleizhi0522 首先我要吐槽一下,看程序的过程中遇见了yield这个关键字,然后百度的时候,发现没有一个能简单的让我懂的,讲起来真TM的都 ...

  9. Linux就该这样学--之常用linux命令及bash基础

    Linux就该这样学--之常用linux命令及bash基础 Linux命令 管道 重定向 环境变量 常用命令 常用系统工作命令 系统状态检测命令 工作目录切换命令 文本文件编辑命令 文件目录管理命令 ...

  10. ReactElement源码笔记

    ReactElement 源码笔记 ReactElement通过 createElement创建,调用该方法需要 传入三个参数: type config children type指代这个ReactE ...