Vue 路由动画

zyboooo

于 2021-08-26 18:35:08 发布

阅读量391

点赞数

文章标签：动画 html css

本文链接：https://blog.youkuaiyun.com/weixin_48199777/article/details/119937883

版权

官网上有一个transition的内置组件
官方过渡动画组件

直接嵌套在路由外 通过name属性来改变动画效果 也可以使用自定义的属性名称

<transition name="slide-fade">
    <router-view></router-view>
</transition>

<style>
.slide-fade-enter,.slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateY(50px);
  opacity: 0;
  transition: all .2s ease;
}
</style>

切换路由页面时，这样写就直接有效果了