Estrutura VUE: resumo detalhado detalhado de vue2 para vue3 (5) Animação de transição

Olá a todos, sou o blogueiro do csdn: lqj_ eu mesmo

Esta é a página inicial do meu blog pessoal :

lqj_I_Python visão de inteligência artificial (opencv) da entrada ao combate real, front end, miniaplicativo WeChat - CSDN Blog

A última coluna de design de formatura do uniapp também está abaixo:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

Normalmente, também explicarei algumas coisas que você costuma usar no vídeo Bilibili,

Bem-vindo ao Bilibili:

Espaço pessoal de Lu Miaoer-Página pessoal de Lu Miaoer-哔哩哔哩Vídeo

animação de transição

uso básico

Se eu quiser usar uma transição em um componente roteado para animar a navegação, posso usar v-slotcombine Animete.csspara fazer isso:

<RouterView v-slot="{ Component }">
  <transition enter-active-class="animate__animated animate__fadeIn">
    <component :is="Component" />
  </transition>
</RouterView>

Transição de uma única rota

O uso acima usará a mesma transição para todas as rotas. Se você deseja que cada componente roteado tenha uma transição diferente, você pode combinar 元信息e dinamizar no :enter-active-class<transition>

const routes = [
  {
    path: '/home',
    component: Home,
    meta: { transition: 'animate__fadeIn' },
  },
  {
    path: '/user',
    component: User,
    meta: { transition: 'animate__bounceIn' },
  },
]

<RouterView v-slot="{ Component }">
  <transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
    <component :is="Component" />
  </transition>
</RouterView>

Transição antes de componentes reutilizados

const routes = [
  {
    path: '/user/:id',
    component: User,
    meta: { transition: 'animate__bounceIn' },
  },
]

Defina a rota acima, ao /user/123mudar de para /user/456, não há efeito de transição. Neste momento, podemos adicionar um keyatributo para forçar a transição, keydesde que os valores sejam diferentes. Para ser franco, é para evitar que Dom seja reutilizado, o que é exatamente o oposto v-fordo princípio de propriedade de key.

<router-view v-slot="{ Component, route }">
  <transition :enter-active-class="`animate__animated ${$route.meta.transition}`">
    <component :is="Component" :key="route.path" />
  </transition>
</router-view>