vue中，用transition标签来定义过渡；从vue2.0开始支持并提供了transition组件，transition作为标签被使用，Vue中如果想要给某个元素添加过渡效果或动画，需要给该元素外部使用transition标签进行包裹。
本文操作环境：windows10系统、Vue2.9.6版，DELL G3电脑。
过渡标签：
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>Transition 的所有功能 在这里同样适用。
单个路由的过渡
上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在<transition> 上：
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 || 'fade'">
<component :is="Component" />
</transition>
</router-view>【相关推荐：《vue.js教程》】
以上就是vue使用什么标签来定义过渡的详细内容，更多请关注php中文网其它相关文章！
收藏
收藏
收藏
Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1
| 本站CDN由 数掘科技 提供
1
227
![ThinkPHP5实战之[教学管理系统]](https://img.php.cn/upload/course/000/000/068/6253d87459486427.png)
