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>

  


  • 2018-10-20 20:44:03

    RecycleView4种定位滚动方式演示

    将RecyclerView滑动到指定位置,或者检索RecyclerView的某一项(各个项的高度不确定),然后定位滚动这到一项,将它显示。 下面就讲解4种RecyclerView定位滚动

  • 2018-10-21 22:29:24

    android ScollView 嵌套 WebView 底部空白,高度无法自适应解决

    最近要做一个页面,需要 ScrollView 嵌套 WebView,怎么嵌套,怎么解决焦点和 touch 事件冲突,网上一大堆,这里就不赘述了,但是发现 WebView 从一个高度很高的网页加载一个高度很低的网页的时候,高度无法自适应了,造成底部会有一大片的空白,解决方案找到了挺多,描述一下:

  • 2018-10-24 15:24:54

    getcachedir和getexternalcachedir的区别

    应用程序在运行的过程中如果需要向手机上保存数据,一般是把数据保存在SDcard中的。 大部分应用是直接在SDCard的根目录下创建一个文件夹,然后把数据保存在该文件夹中。 这样当该应用被卸载后,这些数据还保留在SDCard中,留下了垃圾数据。 如果你想让你的应用被卸载后,与该应用相关的数据也清除掉,该怎么办呢?

  • 2018-10-25 11:05:16

    SimpleDateFormat转换时间,12,24时间格式

    在使用SimpleDateFormat时格式化时间的 yyyy.MM.dd 为年月日而如果希望格式化时间为12小时制的,则使用hh:mm:ss 如果希望格式化时间为24小时制的,则使用HH:mm:ss