vue使用什么标签来定义过渡-View.js-php.cn

vue使用什么标签来定义过渡

WBOY

Lepaskan： 2022-02-15 15:44:18

asal

2613 orang telah melayarinya

vue中，用transition标签来定义过渡；从vue2.0开始支持并提供了transition组件，transition作为标签被使用，Vue中如果想要给某个元素添加过渡效果或动画，需要给该元素外部使用transition标签进行包裹。

vue使用什么标签来定义过渡

本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。

vue使用什么标签来定义过渡

过渡标签：

Vue中如果想要给某个元素添加过渡效果或动画，需要给该元素外部使用标签进行包裹。

版本更迭：

Vue1.0中transition做为标签的行内属性被vue支持。但在Vue2.0中。Vue放弃了旧属性的支持并提供了transition组件，transition做为标签被使用。

过渡动效

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API：

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

Salin selepas log masuk

Transition 的所有功能在这里同样适用。

单个路由的过渡

上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在上：

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

Salin selepas log masuk

【相关推荐：《vue.js教程》】

Atas ialah kandungan terperinci vue使用什么标签来定义过渡. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!