div交换css动画效果

2020-05-07 13:37:12

当然我无论永不用js都是不影响实际操作的。

主要讲下两个div交换的时候带有动画效果的思路。至于使用什么样的动画插件,或者自己写动画都无所为。


当然首先说明的是insertBefore或者append或者appendTo都的时候transition都将会被打断。如何实现动画效果呢。

还是曲线救国的办法。

首先我们正常的让两个div替换位置,这里肯定是瞬间的。

但是我们再瞬间完成以后,给div一个transform让他再瞬间回到原来的位置,这样我们在取消transform动画,这样div就在设定的时间内缓慢的根据动画回来了。

其实也就是先转移后动画,一个障眼法。

好了,看下面的例子。

参考地址  Jquery 动态交换两个div位置并添加Css动画效果

 前端网页开发中我们经常会遇到需要动态置换两个DIV元素的位置,常见的思路大多是不考虑原始位置,直接采用append或者appendTo方式将两元素进行添加,该法未考虑原始位置,仅会添加为元素的最后一子元素。

  今天将给大家介绍一种位置交换方式(判断兄弟元素是否存在),并添加简单的css效果。

  

  设计思路

  判断元素后边是否存在兄弟元素;存在则通过insertBefore方法将另一元素添加至其兄弟元素前,否则则直接采用appendTo方法添加至父元素。

 

 核心代码

  1.判断其后边是否存在兄弟元素

1 function hasBorther(va1){ 2             if(va1.next()[0]){//兄弟元素 3                 return {bor:va1.next()}; 4             }else{ 5                 return {par:va1.parent()};//父元素 6             } 7         }

  2.根据兄弟元素存在与否改变元素位置

 

12345678function removeDiv(app,Div){           if(app.bor){//兄弟元素              Div.insertBefore(app.bor);           }else{              Div.appendTo(app.par);           }        }

 

  

 

  3.移动时之前------添加动画

 

+ View Code

 

  效果图

    说明:更改下拉框可完成两容器位置的交换,目前版本加入部分css动画,效果不是十分完美,欢迎大佬指导。

  

 

源码

  说明:引入jquery库即可。

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153<!DOCTYPE html><html lang="en"> <head>    <meta charset="utf-8">    <title>        Document    </title>    </meta></head> <body>    <script src="jquery-1.11.3.min.js" type="text/javascript">    </script>    <style>    .my-container {        margin: auto 0;        padding: 10px;    }     .my-container>div:first-child {        background: #c0cbff;        margin: auto 0;        padding: 10px;        height: 130px;    }      .my-container>div:last-child {        background: pink;        margin: 10px 0;        padding: 10px;        height: 130px;    }     .my-container>div>div {        width: 100px;        height: 100px;        margin: 5px 10px;        padding: 10px;        float: left;        /* 过渡时间 */        transition:width 2s, height 2s, transform 2s;        -webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari and Chrome */    }     .my-container>div:first-child>div {        background: #ccc;    }     .my-container>div:last-child>div {        background: #fff;    }    </style>    <div class="my-container">        <div class="div1">            <div id="A">子容器A</div>            <div id="B">子容器B</div>        </div>        <div class="div2">            <div id="C">子容器C</div>            <div id="D">子容器D</div>        </div>    </div>    交换元素:    <select name="" id="select1" class="select">        <option value="A">A</option>        <option value="B">B</option>        <option value="C">C</option>        <option value="D">D</option>    </select>    <select name="" id="select2" class="select">        <option value="A">A</option>        <option value="B">B</option>        <option value="C">C</option>        <option value="D">D</option>    </select>    <script>    $(function() {        $('.select').on('change',function(){            var select1=$('#select1');            var select2=$('#select2');            if(select1.val()!=select2.val()){//不同元素  位置交换                var removeDiv1=$('#'+select1.val());                var removeDiv2=$('#'+select2.val());                var appendToObj1=hasBorther(removeDiv1);                var appendToObj2=hasBorther(removeDiv2);                addCartoon(removeDiv1,removeDiv2);//添加动画                //移动两个容器                removeDiv(appendToObj1,removeDiv2);                removeDiv(appendToObj2,removeDiv1);                             }else{                alert('请选择不同元素交换位置!');            }        })         //判断其后边是否存在兄弟元素        function hasBorther(va1){            if(va1.next()[0]){//兄弟元素                return {bor:va1.next()};            }else{                return {par:va1.parent()};//父元素            }        }        //保证位置正确        function removeDiv(app,Div){            if(app.bor){//兄弟元素               Div.insertBefore(app.bor);            }else{               Div.appendTo(app.par);            }         }         //移动时之前------添加动画        function addCartoon(a,b){            var clearTransform=function(Div,time){                setTimeout(function(){                    Div.css({'transform':'inherit','-webkit-transform':'inherit'});                   },time)            }            //记录两容器原始高宽            var oldOpt={ax:a.width(),ay:a.height(),bx:b.width(),by:b.height()};             //获取两容器屏幕位置            var a_pos=a.offset();            var b_pos=b.offset();            //获取两容器偏移值            var offset_x=a_pos.left-b_pos.left;            var offset_y=a_pos.top-b_pos.top;             //第一个花括号里面是动画内容,可以为空,但不能省去中括号            a.animate({},function(){                   var offset_x_=-offset_x; //偏移值取反                var offset_y_=-offset_y;                                                  var transformStr='rotate(360deg) translate('+offset_x_+'px,'+offset_y_+'px)';                a.css({'width':oldOpt.bx+'px','height':oldOpt.by+'px','transform':transformStr,'-webkit-transform':transformStr});                clearTransform(a,0);                        })              b.animate({},function(){                  var transformStr='rotate(360deg) translate('+offset_x+'px,'+offset_y+'px)';                b.css({'width':oldOpt.ax+'px','height':oldOpt.ay+'px','transform':transformStr,'-webkit-transform':transformStr});                clearTransform(b,0);            })        }             })    </script></body> </html>

  


  • 2017-03-16 13:37:58

    mysql中如何使用INSERT一次性插入多条记录

    看到这个标题也许大家会问,这有什么好说的,调用多次INSERT语句不就可以插入多条记录了吗!但使用这种方法要增加服务器的负荷,因为,执行每一次 SQL服务器都要同样对SQL进行分析、优化等操作。

  • 2017-03-18 20:17:09

    Linux上vi(vim)编辑器使用教程

    vi(vim)是上Linux非常常用的编辑器,很多Linux发行版都默认安装了vi(vim)。vi(vim)命令繁多但是如果使用灵活之后将会大大提高效率。vi是“visual interface”的缩写,vim是vi IMproved(增强版的vi)。在一般的系统管理维护中vi就够用,如果想使用代码加亮的话可以使用vim。下面vps侦探整理一下vi的使用教程:包含vi的基本介绍、使用模式、文件的打开关闭保存、插入文本或新建行、移动光标、删除、恢复字符或行、搜索等等,算是一篇比较适合新手学习vi的教程。

  • 2017-03-20 17:31:55

    Nodejs express 获取url参数,post参数的三种方式

    127.0.0.1:3000/index,这种情况下,我们为了得到index,我们可以通过使用req.params得到,通过这种方法我们就可以很好的处理Node中的路由处理问题,同时利用这点可以非常方便的实现MVC模

  • 2017-03-20 17:33:55

    forever守护nodejs进程

    这样可以正常启动应用,但是如果断开客户端连接,应用也就随之停止了。也就是说这样的启动方式没有给应用一个守护线程。

  • 2017-03-22 14:00:51

    Andriod Studio结合Visual Studio Emulator for Android调试Android App

    说到开发就绕不开调试程序,调试Android App我们有2种选择,真机调试和模拟器调试:真机调试相对简单,就不做介绍了,还有一方面原因是由于安卓手机一旦插到电脑上,开始ADB调试后,各种的流氓软件净是往手机上装垃圾应用,妈蛋的;随后就试了几次Android Studio的模拟器之后,无限感慨,真尼玛的卡,卡,卡,,,是可忍孰不可忍.....

  • 2017-03-22 16:26:36

    最全面的Android Webview详解

    现在很多App里都内置了Web网页(Hyprid App),比如说很多电商平台,淘宝、京东、聚划算等等,如下图