series

  • Vue 2 basis
  • Vue 2 components
  • Vue 2 dynamic effect
  • Vue 2 plug-in
  • Vue Router
  • Vuex

reference

  • “Re Vue Starts All over again” series of tutorials from Alex’s Youtube channel
  • Vue 2 Official document

🔗 has a Built-in Youtube player to play the clip directly, while for this article, click the 🎬 icon to open the url of the corresponding Youtube video clip.

Transition dynamic effects are mainly set for elements entering (display)/leaving (hide) and list (rearrange), based on the transition and animation properties of CSS3.

Common cases of triggering animation in Vue:

  • Conditions apply colours to a drawingv-ifswitch
  • Conditions of displayv-showswitch
  • Dynamic component propertiesisswitch

Elements enter/leave transitions

Vue provides a built-in component
as a container that animates the entry/exit of elements wrapped within it.

When the animation is triggered as described above, Vue inserts the corresponding class attribute for the elements in the container, implements the preset action effect, and removes the class attribute when finished.

🎬 Vue inserts six class attributes with different suffixes for elements at different stages of transition. You can use these classes as selectors to more subtly style elements at different stages of transition:

  1. v-enterThis class name can be used as a CSS selector to set the initial style of the element before it is inserted into the page
  2. v-enter-activeApplied throughout the transition phase, you can use this class name as a CSS selector to set transition effects, for example by setting CSS propertiestransitionControl transition relaxation curve
  3. v-enter-toThe next frame takes effect after the element is inserted (at the same timev-enterRemoved) after the transition/animation is complete
  4. v-leaveTakes effect immediately when exit transition is triggered
  5. v-leave-activeApplied throughout the exit transition phase, you can use this class name as a CSS selector to set transition effects, for example by setting CSS propertiestransitionControl transition easing curve and delay time, etc
  6. v-leave-toDefine the end state of the exit transition (at which time v-leave is deleted), which is removed after the transition/animation is complete

💡 If the animation property is used to achieve dynamic effects instead of transition control, there is no need to specify the state of V-Enter/V-leave or V-Enter to/ V-leave-to. Just set the CSS property animation in the V-Enter-active/V-leave-active transition, where the styles of 0% and 100% states specified in the keyframe are the start and end states

💡 Each of the six different class attributes uses v- as the default prefix. If the container tag has the attribute name
, The dynamically inserted class attribute name is prefixed with animationType-, i.e., v-Enter is replaced with animationType- Enter. Remember to style with the appropriate prefix, not the default prefix V -.

💡 Vue can automatically determine the completion time of the transition effect by “unplugging” the associated class name added to the element. However, if (not recommended) you use the CSS properties Trasition and animation to set the animation, the transition time may be different. For example, the animation is triggered and finished very quickly, and the transition is not finished, and there are some unexpected animation bugs. 🎬 You can explicitly declare the type you want Vue to listen to by adding the type option to the container and setting it to animation or Transition. You can also explicitly specify the duration (in milliseconds) on the container element via prop
.

⚠️ The above video is based on Vue 3, but most of the content is compatible with Vue 2. See the corresponding official documentation for details.

🎬 When switching between multiple elements using V-if/V-else, note that elements with the same tag name must be uniquely identified by the key attribute so that Vue can distinguish them; otherwise, only the contents inside the same tag will be replaced. In addition, in multi-element transitions, the default mode is that two elements enter and leave at the same time, which may cause the layout of the page to be messy. You can change the mode to
to let the current element exit first, and then the new element enters

💡 Dynamic effects If they do not take effect when the page is first loaded, you can use the appear or V-ON: Appear hook to set the transition to the initial rendering of the node

🎬 If you want to use a third-party CSS animation library, such as Animate. CSS, you need to insert specific class names on DOM elements to apply the corresponding CSS styles. You can use attributes listed below on the
tag. Vue then adds these custom transition class names to the elements in the container at the appropriate stage of the transition:

  • enter-class="framework-class-name"The class name added to the element before it enters the page
  • enter-active-class="framework-class-name"
  • enter-to-class="framework-class-name"
  • leave-class="framework-class-name"
  • leave-active-class="framework-class-name"
  • leave-to-class="framework-class-name"

In addition to inserting different class attributes for elements at different stages of the transition, Vue also fires corresponding events at the same time, 🎬 so you can listen for these events and animate them “manually” by setting element attributes in JS:

  • v-on:before-enter="beforeEnter(el)"You can pass elements that perform animations
  • v-on:enter="enter(el, done)"It needs to be called in the callback function when the animation execution is completedone()Tell Vue that the animation is over and must be executed oncedone()Otherwise, they will be called synchronously and the transition will complete immediately.
  • v-on:after-enter="afterEnter"
  • v-on:enter-cancelled="enterCancelled"The event triggered when the element leaves the page
  • v-on:before-leave="beforeLeave"
  • v-on:leave="leave"It needs to be called in the callback function when the animation execution is completedone()Tell Vue that the animation is over and must be executed oncedone()Otherwise, they will be called synchronously and the transition will complete immediately.
  • v-on:after-leave="afterLeave"
  • v-on:leave-cancelled="leaveCancelled"

💡 recommends v-bind: CSS =”false” for elements that use ONLY JS transitions. Vue skips CSS detection. This also avoids the impact of CSS during the transition.

List rearrangement transition

🎬 uses the component
as a container, which can wrap multiple nodes (whereas
allows only one root node, which can have multiple elements, But there can only be one root node for each V-if or V-show switch), which is rendered by default as a
container wrapped list, which can be replaced with other elements by setting the attribute tag=”div”. Each internal node always needs to provide the attribute key as a unique identifier.

Vue also inserts the six different suffix classes described above for elements at different stages of the transition, and you can use these classes as selectors to set styles.

Animationtype-move (animationType-move, animationType-move, animationType-move, animationType-move, animationType-move) Vue then uses the CSS property Transform to smoothly transition the element from its previous position to the new position, creating an animation effect called FLIP.

The 💡 video tutorial recommends shuffling list data using the _. Shuffle (Collection) method of Loadash, a JS library

💡 This dynamic effect is not valid for display: inline elements, so you can set the element, such as , to display: inline-block

Dynamic transition

Vue is a data-driven screen, so the type of transition effects can be changed based on the data, 🎬 For example, you can manipulate the type of transition effects in real time by
binding attribute name to the variable. For example, click the left and right arrows to switch direction and transition.

💡 Remember the slide library reveal.js that I came across earlier, and I felt that I could implement 😄 through the dynamic transition of Vue as a small project. 🎉 found a tool called Slidev, a slideshow creation tool designed to provide flexibility and interactivity for developers, with more features, though still in Beta.

State transition

Transition effects can also be set for changes to the element’s content/data itself, 🎬 including numbers and operations, color display, position of SVG nodes, element size, and other properties.

In general, style attributes expressed in numerical values can be set dynamic effects, and third-party libraries can be combined with Vue’s responsive and component systems to realize the transition state of switching elements, such as tween.js and GSAP