• This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Can be achieved byAppear propertiesSet the transition of the node in the initial rendering. The default is the same as the enter/leave transition. You can also customize CSS class names and JavaScript hooks.

Transitions of multiple components

When switching between elements with the same tag name, it is recommended to use the key attribute to set a unique value to mark the switch. Otherwise, Vue will only replace the contents of the same tag for efficiency

Switching between two elements can be set like this

<transition>
  <button v-bind:key="isEditing">{{ isEditing ? 'Content' : 'Content does not exist'}}</button>
</transition>
Copy the code

Transition mode

  • in-out: The new element transitions first, then the current element transitions away.
  • out-in: The current element transitions first, and then the new element transitions in.
<transition name="fade" mode="out-in">// Write it in mode<! - content - >
</transition>
Copy the code

There are a number of components of the transition **, you can go directly to the official website, the example with my work is much the same, I will not interpret the ** here

List the transition

useV - forIn this scenario, use<transition-group>component

Several features of this component:

  • Different from the<transition>, it will be rendered as a real element: the default is one<span>. You can also passtagProperty is replaced with another element.
  • Transition mode is not available because unique elements are no longer switched between each other.
  • Internal elementsAlways need toProvide uniquekeyAttribute values.
  • CSS transitioning classes will be applied to internal elements, not the group/container itself.
 <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
Copy the code

<transition-group>Components have another special aspect. Not only can you enter and leave the animation, you can also change positioning.

This can be done using the V-move attribute, which is applied during element change positioning. As with the class name before, the prefix can be customized through the name attribute or manually set through the move-class attribute.

 <transition-group name="list" tag="p">
    <span v-for="item in items" v-bind:key="item" class="list-item">
      {{ item }}
    </span>
  </transition-group>
<style>
.list-move {
  transition: transform 1s;
}
</style>
Copy the code

This allows you to see transitions when the list changes order

Note: Elements that use FLIP (V-move) transitions cannot be set to display: inline. This can be set to display: inline-block or placed in Flex

If you want to reuse transitions, create a reusable transition component<transition>or<transition-group>As the root component, and then place any child components in it.

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤