Configuration
To perform CSS transitions and animations when a Vue component enters or exits the DOM, the Animations use the Vue transitions.
The Animations wrap all components which will be animated and enclose every child element in an AnimationChild component.
Default Setup
The following example demonstrates how to animate a CONTENT element which is added to the Slide Animation with an entering effect. When CONTENT is removed, the element acquires a special animation effect.
Animating Elements and Components
The Animations provide options for animating:
Entering Components
To the child component which enters the animation, the Animations set a {transitionName}-enter CSS class. Then, to start the animation, they add a {transitionName}-enter-active CSS class to the child.
The naming convention of the CSS class names is similar to the classes in the Transition component. For example, the Slide adds a k-slide-down-enter CSS class on enter and, in the next tick, adds a k-slide-down-enter-active to activate the transition.
Exiting Components
To the child component which exits the animation, the Animations set a {transitionName}-exit CSS class. Then, to start the animation, they add a {transitionName}-exit-active CSS class to the child.
The naming convention of the CSS class names similar to the classes from the Transition component. For example, the Slide adds a k-slide-down-exit CSS class on exit and, in the next tick, adds a k-slide-down-exit-active to activate the transition.
