路由动画

全局路由动画

image.png

transition.css

/*
路由动画
nuxt 都是约定式的 所有这里配置 page-enter-active page-leave-active 就会自动添加上去
*/
/* 动画形式 */
.page-enter-active,.page-leave-active {
  transition: all 0.3s;
}
/* 入 退 */
.page-enter,.page-leave-active {
  opacity: 0;
}

nuxt.config.js

// 全局样式
  css: [
    'assets/css/transition.css'
  ],

页面组件路由动画

export default {
  name: 'reg',
  validate({ parmas, query: { name } }) {
    console.log(name)
    // 完成校验业务
    return true
  },
  transition: 'reg' // 先订动画类名
}
</script>
<style scoped>
/* 给单独的页面做路由动画 也可以在全局文件下写 */
  .reg-enter-active,.reg-leave-active {
    transition: all 0.3s;
  }
  .res-enter, .reg-leave-active {
    margin-left: 1000px;
  }
</style>