• This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Transitions _ multielement transitions

When the label name of the element displayed in the switch is the same, you need to set a different key value for each element; otherwise, Vue will only replace the contents inside the same label for efficiency.

<transition>
  <div v-if="show" key="world">hello world</div>
  <div v-else key="shanshan">hello shanshan</div>
</transition>
Copy the code

In some scenarios, v-if and V-else can be replaced by setting different states for the key of the same element. Such as:

<transition>
  <div :key="keyName">hello {{ key Name}}</div>
</transition>
Copy the code
keyName: 'world'.Copy the code

Transition mode

Vue provides a mode feature, which can apply different modes to multiple elements. The value of mode can be:

  • In-out: The new element transitions first, and then the current element transitions away.
  • Out-in: The current element transitions first, and then the new element transitions in.

Multicomponent transition

We can use dynamic component switching to show different components.

Transitions _ list transitions

When we want to add transition dynamic effects to a list, we can use the
component.

Features of this component:

  • Instead, it will be rendered as a real element: the default is one<span>. You can also use tag attributes for other elements.
  • Transition mode is not available because we no longer switch unique elements between each other.
  • The inner element always needs to provide a unique value for the key attribute.
  • CSS transitioning classes will be applied to internal elements, not the group/container itself.

Sort transitions for lists

The
component provides a new feature: V-move, which is applied during element positioning changes. How to use it? It can be set by the class name:.v-move {}. When the name feature is set to
, for example, name is fade, v-move must be replaced with fade-move when it is used.

Note: When removing a list element, you need to remove the element from the document flow. Otherwise, the element to overflow will remain in the document flow during the remove transition, affecting the move effect of subsequent elements.

Internal implementation: Vue uses a simple animation queue called FLIP that uses transforms to smooth the transition of elements from their previous positions into new ones.

Note that elements using FLIP transitions cannot be set to display: inline. Alternatively, it can be set to display: inline-block or placed in Flex.

Staggered transitions of lists

If you want to apply rich transitions to elements in a list, you can use JavaScript hooks.

Transition _ multiplexing transition

Transitions can be reused through Vue’s component system. To create a reusable transition component, all you need to do is place or as the root component, and then drop any child components into it.

Note: When using functional component reuse transitions, do not set CSS scopes.

Component_asynchronous Component

In the project, some components will not be loaded when entering the first screen for the first time, but will be loaded when certain operations are performed. Therefore, we can set the component to be loaded asynchronously at this time, and when it is used and loaded again, so as to improve the performance of the first screen.

Usage:

components: {
  AsyncCmp: () = > import (url);
}
Copy the code

To combine multiple components that need to be loaded simultaneously into a single file:

components: {
  AsyncCmp1: () = > import( /* webpackChunkName: "async" */  'url'),
  AsyncCmp2: () = > import( /* webpackChunkName: "async" */  'url'),}Copy the code

For files loaded asynchronously, el=”prefech” will be set on the link tag. The browser will download the corresponding resources in idle time, and can directly obtain the resources from the cache. The corresponding el=”preload” will download the corresponding resource in time.

The last

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

Bloggers are honest and answer questions for free ❤