Vue Transitions For Beginners

First things to know

1. If you are new to web development and curious about knowing whether you can work with css transitions and animations in Vue the way you traditionally did, then the answer is

   Yes, you can. No Powers are being taken away, genius.

2. Now you'll question, then why should we learn this new Vue tweak that'll burst our mind again like css transition did to some people, wrap up, wait let me answers this

   And it is, just more power, vue seems to be here to give more, than to take. Giving more control, less confusion.

3. This Blog will you give you insights into the Vue transitions. That's it, i'll make you look confident when you first see the code, and write code. Let's dive onto the surface now.

What are Vue Transitions and How to use them in code?

Basically it is a wrapper component <transition>Context</transition>, allowing you to write transitions with context to other elements. The contexts that can be v-if, v-show or some other technical jargons (Dynamic components, Component root nodes). More precisely as below.

You can see a plain bounce transition whenever the alertVisible sets to true. By plain bounce I mean uncontrolled behaviour, and thats because you have not customised it.

Now you will say that's it no control or customisation, so wait let me to present you the semantics that let you control that bounce or any other transition selected.

These customisation semantics are called as Vue transition classes and they are as follows:

• v-enter
• v-enter-active
• v-enter-to
• v-leave
• v-leave-active
• v-leave-to

Where v can be changed to the name property of the transition. As Below. Doing this will add the customisation to your transition nostalgic to vanilla CSS, Right!

Note that the classes in the style, are vue transition classes and not normal html classes attributes that you need to declare explicitly.

Bonus

If anyone is curious about how to add animation under the same hood, its quite simple too. Refer Below.

That's all for the first blog i've written in my life, I hope you find it helpful enough to read till the end, and if you do so please consider sharing It with others.

GoodBye, You're a Genius, and an Artist. Never stop learning