Vue.js render functions and transitions (translated by Hajime Yamasaki Vukelic)

Hello, Habr! I decided to start my work with the translation of articles into Russian, which I myself was greatly benefited from. Hope you come in handy. I note that I tried to translate literary, not literally.


The first to your attention is the translation of the article “Vue.js render functions and transitions” by Hajime Yamasaki Vukelic.

Vue.js render functions and transitions

The Vue.js documentation on render functions leaves a lot to be desired. For users who use JSX with render functions, this can create problems. In this article, we will look at how to create transitions in this particular scenario.

I use JSX in the examples, but it works with simple JavaScript rendering functions, since JSX is just syntax sugar for h () calls. If you want to know more about this topic, see this article .
')

How transitions work in general

The essence of transitions is that you have a built-in transition component that assigns classes to elements that are mounted (enter) or dismounted (leave).

Pikabu dance

The main nuance: how to determine the place of installation or dismantling of elements. This problem can be solved in several ways.

You can use the ternary operator to implement the appearance / disappearance of an element:

render(h) { <transition> {this.showDiv ? <div class="myDiv">Hello</div> : null} </transition> } 

or to replace one item with another:

 render(h) { <transition> {this.showOneOrTheOther ? <div class="myDiv">Hello</div> : <div class="myOtherDiv">Hello again</div> } </transition> } 

No, I was just joking. Of course, you cannot use the ternary operator without additional parameters to replace such elements. However, there is a nuance. The comparison algorithm decides that there is already an element there, so instead of removing it from the DOM, it simply corrects it so that it looks like another element.

It would be better if you use the key when replacing elements:

 render(h) { <transition> {this.showOneOrTheOther ? <div key="myDiv" class="myDiv">Hello</div> : <div key="myOtherDiv" class="myOtherDiv">Hello again</div> } </transition> } 

If the key is present, the two elements change completely (the old one is dismantled, and the new one is mounted in its place), while the keys are different.

Similarly, if you want to swap a component or element from another same component / element:

 render(h) { <transition> <div key={this.subcomponentKey}> <MyComponent /> </div> </transition> } 

In the example above, the method this.subcomponentKey is going to somehow calculate the corresponding key for the component MyComponent.

Key differences

While we are talking about keys, remember that elements / components are always displayed completely when the key changes. On the other hand, as long as the key remains the same, the elements / components do not change.

Do not let this catch you by surprise. Before you accidentally add a key to almost everything that moves (or should move), carefully consider what the value of this key should be. First, check without a key, record the results, and then add a key and see if you can repeat the same effect. If the user interface is not updated, you probably chose the wrong key value.

Add animation

Now that we know how to make our elements go and come back, it's time to work on the animation.

In the simplest case, we have two classes. One class is always used, and the other is applied when the element / component is assembled or disassembled.

 // my.css .base { transition: transform 1s; } .out { transform: translateX(-100vw); } 

Now add these classes to the code:

 render(h) { <transition enter-class="out" leave-to-class="out"> {this.someProp ? <div class="base">Hello</div> : null} </transition> } 

These classes (enter-class and leave-to-clas) are well documented . Read about them there.

The enter-class class serves as a repository for styles that are applied immediately after the element is mounted. Immediately after this class is removed. We add transitions to create an animation between the time that the enter-class is applied and the time when it is not (when only the .base class is used).

The leave-to-class class is applied just before deleting an element. Then Vue.js waits for the animation to complete, and then removes the element from the DOM tree. Again, we use transitions to create animations.

In our example, we used the same .out class for entry and exit, but we can use different classes for two events.

Conclusion

I hope you now understand the key concepts of Vue.js transitions when used in rendering functions and with JSX. However, Vue.js transitions offer much more features, such as the ability to connect to transition events using JavaScript and, therefore, do even some things not related to animation (such as life-cycle traps). I will finish the article here, and leave the experiments to my dear readers.

Happy hacking!