网站管理工作总结,安徽网站建设seo优化,网站系统怎么建设,跨境商城网站建设文章目录 一、过渡动效1.1安装animate.css1.2 利用元信息存储过渡名称1.3 在组件中使用 二、滚动行为2.1 始终滚动到顶部2.2 相对于某个元素的偏移量2.3 保持之前的滚动位置 一、过渡动效
1.1安装animate.css
npm install animate.css --save1.2 利用元信息存储过渡名称
{pa… 文章目录 一、过渡动效1.1安装animate.css1.2 利用元信息存储过渡名称1.3 在组件中使用 二、滚动行为2.1 始终滚动到顶部2.2 相对于某个元素的偏移量2.3 保持之前的滚动位置 一、过渡动效
1.1安装animate.css
npm install animate.css --save1.2 利用元信息存储过渡名称
{path: /home,name: home,alias: /index,component: () import(/views/home/index.vue),meta: { transition: animate__tada },},{path: /about/:id,name: about,meta: { transition: animate__backInDown },component: () import(/views/about/index.vue),},1.3 在组件中使用
注意不能直接transition包裹router-view,会发生以下的报错
以下式错误写法
transition:duration500leave-active-classanimate__animated animate__fadeOutUpenter-active-classanimate__animated animate__fadeInLeftrouter-view/router-view/transitionrouter-view不能再直接在内部使用transition或keep-alive 正确写法
router-view v-slot{ Component, route }transition:duration500leave-active-classanimate__animated animate__fadeOutUpenter-active-classanimate__animated animate__fadeInLeftcomponent :isComponent :keyroute.path //transition/router-view二、滚动行为
使用 Vue Router 中的滚动行为Scroll Behavior来控制页面切换时的滚动位置。当用户在页面之间导航时页面可以自动滚动到指定的位置从而提供更好的用户体验
to表示即将进入的目标路由对象。from表示当前导航正要离开的路由对象。savedPosition只有在使用浏览器前进/后退按钮时才可用用于记录滚动位置
const router createRouter({history: createWebHashHistory(),routes: [...],scrollBehavior (to, from, savedPosition) {// return 期望滚动到哪个的位置}
})2.1 始终滚动到顶部
const router createRouter({scrollBehavior(to, from, savedPosition) {// 始终滚动到顶部return { top: 0 }},
})2.2 相对于某个元素的偏移量
const router createRouter({scrollBehavior(to, from, savedPosition) {return {// 也可以这么写// el: document.getElementById(main),el: #main,top: -10,}},
})2.3 保持之前的滚动位置
const router createRouter({scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition} else {return { left: 0, top: 0 }}},
})
