How to translate div between two parents?

Question

I have two containers:

<div class="left"> <div id="myDiv">A Div</div> <div id="myDiv2">A Div</div> </div> <div class="right"> <div id="myDiv3">A Div</div> </div> 

The first contains div elements that move with the following jQuery:

 $(".left > div").click(function(){ $(this).appendTo('.right'); }); 

However, the foregoing does not provide animation. I would like to use CSS transition to animate each div between two parent elements (From .left to .right ).

By the way, this is my CSS:

 .left, .right{ position: absolute; display: block; box-sizing: border-box; width: 50%; height: 100%; } .left{background:red;} .right{background:green; left: 50%;} .left > div, .right > div{ display: block; height: 100px; width: 100px; margin: 10px; float: left; background: #fff; color: #000; } 

And the script: http://jsfiddle.net/x270Lndz/

---

I suppose I need to get the coordinates and the transition between them, outside of .left and .right .

Answer 1

I wrote a jQuery plugin:

 $.fn.transitionTo = function(target){ this.each(function(){ $this = $(this); marginLeft = parseInt($this.css('marginLeft').replace("px", "")); marginTop = parseInt($this.css('marginTop').replace("px", "")); offset = $this.offset(); $new = $this.clone().appendTo(target); offsetNew = $new.css('opacity',0).offset(); $this.css({ position: 'absolute', left: offset.left - marginLeft, top: offset.top - marginTop }).appendTo("body"); setTimeout(function(a,b){ a.css({ left: offsetNew.left - marginLeft, top: offsetNew.top - marginTop }); setTimeout(function(a,b){ b.replaceWith(a.removeAttr('style')); },2000,a,b); //Anim time },10,$this,$new); }); }; 

It is called similarly to .appendTo :

 $(".left > div").click(function(){ $(this).transitionTo('.right'); }); 

... and only transition: top 2s ease, left 2s ease; is required transition: top 2s ease, left 2s ease; on the div .

Fiddle: http://jsfiddle.net/d9yxrmvo/1/

---

The only known problem with this plugin is the lack of support for animating the original sibling elements.

Answer 2

This has already been said: fooobar.com/questions/172127 / ...

The problem is in 2 parts, moving elements in the DOM and animating this movement, but the following is suggested:

• Keep the div position at rest in the first column.
• Add a div to the second column, keep this position.
• Turn off the visibility of the div.
• Create a clone div located where the dormant state is.
• Animate this clone to the position of the added div.
• Turn off the visibility of this clone.
• Return the original div that was added.

javascript / jquery will execute it so fast that you will not see the divs turn off / on, and it will look as if the div they see is the only one that ever existed.

Answer 3

Try adding transition: 0.5s ease-in to the .left div

Answer 4

Ultimately, it will be a lot of work, and I don’t think I have time to write each step in its entirety. But, if you are sure, here goes:

• Call getBoundingClientRect() or similar for the first element to get its absolute position of the document relative to the document / viewport.
• Use the same function and getComputedStyle() padding to determine the exact pixel at which the content will begin in the second div.
• Define the difference between the two coordinates to fake the transition while the elements are still inside their first parent. (Or, transfer them first and fake the transition after)
• Apply the correct transform: translate style to the elements so that they move to another container. (It is assumed that you have the CSS transition properties set correctly)
• In the transitionend event, turn off the transitions, remove the transform property, and perform the actual move.
• Pat yourself on the back and head home early.

So you have it. There will probably be a lot of maths involved and small additions / subtractions that I cannot predict. Hope this plan helps you get started at least. You may also be lucky enough to find an animation library that does all of this for you. (Also note that I assumed there were several features that are not supported in all browsers, so make sure they are in order with your book)