Vue.js uses transition animation to create route jump animation

This time I will bring you how to use transition animation in Vue.js animation to make routing jump animation, and Vue.js to use transition animation to make route jump animation Precautions What are they? The following is a practical case. Let’s take a look.

keep-live: The switched view will be cached. If keep-live is not added, it will be re-requested every time, which consumes more resources

<transition name="fade">
   <keep-alive>
      <router-view></router-view>
   </keep-alive></transition>

Note:

When we switch navigation, the class of the current link tag will be assigned class="router-link-active", which is a very useful operation.

Add active-class="active" to router-link to modify the style

<ul>
    <router-link v-for="item in products" :to="{ path: item.path }" tag="li" active-class="active">
     {{ item.name }}    </router-link></ul>css部分
选种和hover时,显示蓝色
.product-board li.active,
.product-board li:hover {
  background: #4fc08d;
  color: #fff;
}
......

The keep-alive attribute of router-view ensures that the view is only rendered once, and switching back and forth does not render repeatedly

I believe I read the case in this article You have mastered the method. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Other operations of Vue.js routing

Nested routing (sub-routing) of Vue.js )

Vue.js’s custom directive directive

The above is the detailed content of Vue.js uses transition animation to create route jump animation. For more information, please follow other related articles on the PHP Chinese website!