1. With JavaScript
1.1. Enter
1.1.1. Before Enter
1.1.1.1. only parameter:'element'
1.1.2. Enter
1.1.2.1. parameters: 'element','done - callback'
1.1.3. After Enter
1.1.3.1. only parameter:'element'
1.1.4. Canceled
1.2. Leave
1.2.1. Before Leave
1.2.1.1. only parameter:'element'
1.2.2. Leave
1.2.2.1. parameters: 'element','done - callback'
1.2.3. After Leave
1.2.3.1. only parameter:'element'
1.2.4. Canceled
2. Both Function Has To Accept The 'Done' argument which is a callback
3. By Default VueJS looks for the CSS Animation resources. So your JS animation is more resourceful than it should be! Add the ':css=false' to stop the searching for CSS styles! By default it is true. In those situation you can use CSS and JS animation at the same time for complex things.
4. With CSS
4.1. Transition Or Transition-group
4.1.1. General
4.1.1.1. Enter
4.1.1.1.1. Beginning Class
4.1.1.1.2. Ending Class
4.1.1.1.3. Process Class
4.1.1.2. Leave
4.1.1.2.1. Beginning Class
4.1.1.2.2. Ending Class
4.1.1.2.3. Process Class
4.1.2. Fine-tuning
4.1.2.1. Override CSS transition time on element with the 'duration' attribute
4.1.2.2. Set the mode to change the default order of the transition animation.
4.1.2.2.1. default: in-out
4.1.2.2.2. reverse: out-in
4.1.2.3. When you use transition and CSS animation at the same time with different transition time then Vue will use the longest transition time. You can define which one you want to use
4.1.2.3.1. You can set it to transition
4.1.2.3.2. You can set it to animation
4.2. Animations
4.2.1. You can use CSS @keyframe animation alone or in mixture with Transitions.