What tags does vue use to define transitions

In vue, use the transition tag to define the transition; starting from vue2.0, it supports and provides the transition component. The transition is used as a tag. If you want to add a transition effect or animation to an element in Vue, you need to Wrap the element with a transition tag.

The operating environment of this article: Windows 10 system, Vue version 2.9.6, DELL G3 computer.

What tags do vue use to define transitions

Transition tags:

If you want to add a transition effect or animation to an element in Vue, you need to Wrap the element with a tag.

Version changes:

The transition in Vue1.0 is supported by vue as an inline attribute of the label. But in Vue2.0. Vue dropped support for the old properties and provided the transition component, which is used as a label.

Transition animation

To use transitions on your path components and animate navigation, you need to use the v-slot API: ## All the features of #

<router-view v-slot="{ Component }">
  <transition name="fade">
    <component :is="Component" />
  </transition>
</router-view>

Transition apply here as well.

Transition for a single route

The above usage will use the same transition for all routes. If you want each routed component to have a different transition, you can combine meta information with a dynamic name and place it on 300ff3b250bc578ac201dd5fb34a0004:

const routes = [
  {
    path: '/custom-transition',
    component: PanelLeft,
    meta: { transition: 'slide-left' },
  },
  {
    path: '/other-transition',
    component: PanelRight,
    meta: { transition: 'slide-right' },
  },
]
<router-view v-slot="{ Component, route }">
  <!-- 使用任何自定义过渡和回退到 `fade` -->
  <transition :name="route.meta.transition || &#39;fade&#39;">
    <component :is="Component" />
  </transition>
</router-view>

[Related recommendations:《

vue.js tutorial》】

The above is the detailed content of What tags does vue use to define transitions. For more information, please follow other related articles on the PHP Chinese website!