How to implement Svelte's Defer Transition in Vue

I recently watched Rich Harris's <Rethinking Reactivity> video. I was amazed at the efficiency of the Svelte framework and discovered some native support for animations that Vue does not have—defer transitions.

Let’s first look at the effect of Svelte’s so-called defer transition.

This is the Todo Demo app made with Svelte. The entire todo is divided into 3 parts. Input section, todo list and done list. When you click an item in the to-do list, the corresponding item will be "moved" to the done list, and vice versa.

Here, items are transferred from one list to another, not flashing abruptly, but moving very friendly from the click point to the destination; at the same time, when an item in the list leaves, the remaining items will move up smoothly to fill the vacant position. In Svelte, it can be achieved by adding only a few lines of code, which is very developer-friendly and efficient. Refer to the following code or Svelte tutorial

{#each todos.filter(t => !t.done) as todo (todo.id)}
    <label
	in:receive="{{key: todo.id}}"
        out:send="{{key: todo.id}}"
        animate:flip>
        <input type=checkbox on:change={() => mark(todo, true)}>
            {todo.description}
            <button on:click="{() => remove(todo)}">remove</button>
    </label>
{/each}

Only in, out and animate attributes are added to element. Here, in and out accept the functions receive and send provided by the framework respectively and provide filtering conditions for them. The animate property accepts the built-in flip method. The flip here does not mean flipping, but FLIP technology, which vue also uses in <transition-group>. Mainly used to move the remaining items in the list as a whole to fill the positions of lost elements.

So I was thinking, if it is Vue, how can I achieve the corresponding effect. (If you don't want to read the detailed instructions, you can directly view the code in the code pen)

Vue natively provides two components to support animation. transition and transition-group. Since it is a list movement, we use transition-group here. For specific usage, please refer to the Vue tutorial Transitions & Animation.

To achieve the same effect, there are two major UI animation effects to be implemented.

When an item in a list disappears, the remaining items move to fill the empty space. When an item disappears and is inserted into another list, the item moves. The first requirement is relatively simple to implement. Vue native already provides good support. Please refer to List-Move-Transitions in the Vue documentation.

In order to achieve the second requirement, several issues must be resolved:

1. Location information of disappeared items
2. Insert entry location information
3. When to start and end animations
   

Let’s first look at how to solve the first two problems. According to the documentation, transition-group provides a javascript hook. They are:

 v-on:before-enter
 v-on:enter
 v-on:after-enter
 v-on:enter-cancelled

 v-on:before-leave
 v-on:leave
 v-on:after-leave
 v-on:leave-cancelled

If we visualize it, it might look like this:

before-enter: Used to set the initial value of the transition for inserting an entry. Unable to obtain BoundingClientRect. enter: animation period at this time. At this time, the parameter el of the enter hook function can obtain boundingClientRect after-enter: callback function after the animation ends enter-cancelled: cancel the enter hook

The same is true for leave.

Therefore, the only time we can get the DOMRect information of the entry element is when entering and leaving.

In this way, we can get the DOMRect data of the leave item and save it when leaving. When entering, we can have the location information of both the leave item and the enter item.

The location information is obtained, but how can we make the entry move from the disappeared entry when the entry is entered? (Think about it first, then read the explanation below).

Therefore, if we want to achieve the effect of moving, we first need to hide the leave item element.

leave(el, done) {
      console.log("before leave");
      const rect = el.getBoundingClientRect();
      sendRectMap.set(el.dataset.key, rect);
      el.style.display = "none";
},

Then set the initial position state for the enter item element. The initial position is the position of the leave item element. Then when the transition takes effect, restore its position to the insert (enter) position.

This method is actually the so-called FLIP technology. This technique is also used in the transition-group component to move the remaining list to fill the removed items.

var first = el.getBoundingClientRect();

// Now set the element to the last position.
el.classList.add('totes-at-the-end');

// Read again. This forces a sync
// layout, so be careful.
var last = el.getBoundingClientRect();

// You can do this for other computed
// styles as well, if needed. Just be
// make sure to stick to compositor-only
// props like transform and opacity
// where possible.
var invert = first.top - last.top;

// Invert.
el.style.transform =
    `translateY(${invert}px)`;

// Wait for the next frame so we
// know all the style changes have
// taken hold.
requestAnimationFrame(function() {

  // Switch on animations.
  el.classList.add('animate-on-transforms');

  // GO GO GOOOOOO!
  el.style.transform = '';
});

Then the next question is, when to set the initial state of the enter entry element transition, and when to set the end state of the enter entry element transition.

According to the javascript hook mentioned above, we can set the initial state in the before-enter hook function, and then set the transition end state in the enter hook function. So, what is our initial state? Through getBoundingClientRect, we can get the DOMRect data of the enter element (later identified by to), including top, left, bottom, right, width, height, x, y. At the same time, we can also obtain the location information of the leave entry (called from) through the previously saved leave position map. So before-enter, we use the calculated offset to initialize the position of the to element through translate. Then in the enter stage, translate its value to from, and add transition to the CSS.

In the before-enter hook:

        // Identifier of the mobile element const key = el.dataset.key;
        // enter entry map, note here, in the before-enter hook,
        // receiveRectMap cannot get to. Requires special handling. It is mentioned later that const to = receiveRectMap.get(key);
        //leave entry map
        const from = sendRectMap.get(key);

        // Calculate the offset const dx = from.left - to.left;
        const dy = from.top - to.top;
        
        // Initialize the position of the to item el.style.transform = `translate(${dx}px, ${dy}px)`;
        el.style.opacity = 0;

In the enter hook:

        el.style.transition = "all 800ms";
        el.style.transform = "";
        el.style.opacity = 1;
        el.style.display = "block";

In the above code, in before-enter, to is obtained through receiveRectMap.get(key). However, at this time, there is no DOMRect value corresponding to the key in receiveRectMap. Although the input parameter of before-enter is el (HTMLElement), all values ​​in the DOMRect of the el element are 0, so we need to put el into receiveRectMap in the enter method. This will cause a contradiction, that is, it is impossible to initialize the position of the to element through translate in before-enter. Therefore, we use the defer transition technique here to delay the occurrence of transition.

We can use setTimeout or requestAnimationFrame in enter to implement defer transition.

requestAnimationFrame(() => {
        const key = el.dataset.key;
		  // In this way, receiveRectMap will have the value of the key.
        const to = receiveRectMap.get(key);
        const from = sendRectMap.get(key);

        const dx = from.left - to.left;
        const dy = from.top - to.top;

        // Since we delayed the transition,
        // So the position of the to element has actually reached the destination position,
        // So we need to use transition to manually transition it to the from position. This line is very important el.style.transition = "all 0ms";
        el.style.transform = `translate(${dx}px, ${dy}px)`;
        
        // After initialization, in the next animation frame, use FLIP technology to move it back.
	requestAnimationFrame(() => {
          el.style.transition = "all 800ms";
          el.style.transform = "";
          el.style.opacity = 1;
          el.style.display = "block";
        });
      });

The complete code can be found in codepen

Final result:

The above is the details of how to implement Svelte's Defer Transition in Vue. For more information about Vue's implementation of Svelte's Defer Transition, please pay attention to other related articles on 123WORDPRESS.COM!