Create own Vue <transition-group> animation with CSS and jQuery

Question

Recently I found awesome animation with shuffle list https://jsfiddle.net/chrisvfritz/sLrhk1bc/ I am amazed this. So I try do it same by using only CSS and jQuery.

I also tried to do it myself https://jsfiddle.net/stas0/68Lpwqgk/ But it no working as in vue shuffle.

As I read before I am understand that element must move in DOM tree but I don't know how add animation to it. I gues that I need use transform but can't understand how maybe use transform: translate but in vue example I didn't find translate options.

So my target is create simple shuffle(in my link example only two items) like in Vue only with CSS and jQuery.

Thanks.

Answer 1

The reason why you don't see any translate s (or matrix s, for that matter) transforms on the initial example is because the transformations are performed in the <transition-group> directive.

Without this directive, the change would be instant. The elements would jump to their new positions. What <transition-group> does is:

• calculates the position the elements would have after the jump
• applies transforms to the elements until they get in their correct position without changing their order in DOM
• after transforms are done, it a) removes all transition classes and the transforms and b) performs the DOM operations. Since this is done inside a single animation frame, you can't see the switch.
  It's a jump from transformed elements to reordered elements. Because they're in the exact same places, the "jump" is not visible.

In order to allow control over the animation, <transition-group> applies transition classes to each transitioning element.

In the original example,

.cell-move {
  transition: transform 1s;
}

controls the animation, because:

• the name of the transform-group is cell .
• the type of change is move (the transformed children move their position in the parent).

To better visualize what's going on, watch their indexes .

---

So, in order to replicate the same effect, you need to:

• calculate new positions (a handy way is to make a parent clone and render it invisibly, with elements in correct order)
• compare old positions of elements with new positions (use getBoundingClientRect on each) and use them to transition the original elements to the cloned ones positions
• once animations are done, remove all transitions and transforms from the originals and perform the DOM changes (note you'll be tempted to simply replace originals with the clones - because, technically, they are already in the correct order - but you really don't want to do that - you'd lose all events bound on originals!)
• remove clone

Important note: you don't have to actually insert the clone in DOM in order to calculate the new positions, but doing so makes things easier, especially if you don't understand everything happening behind the scenes.
The important part is that the clone does not trigger a redraw in the Layout and Paint layers of your document. It basically has to have position:absolute throughout its entire life-cycle.

---

Even though your question has a different flavor (ie: "How does Vue do it?" ), technically, your question has been asked and answered before. For example, a quick search through my answers with clone and/or transition will likely pop similar answers. Here's a similar one .