1. 组件内滚动
- 组件内滚动到指定锚点 scrollIntoView
在组件中
<div ref="end">xxxxxxxxxxxxxxxxxxxxxxxxxxxx</div>
// 初始化的化滚动，必须在mounted生命周期中，created 不行
mounted() {
this.$refs.end.scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
});
}
- 组件内滚动到指定位置
初始化的化滚动，必须在mounted生命周期中，created 不行
在组件中
document.documentElement.scrollTop = 100 // 不加单位
2， 路由滚动
- 进入目标路由滚动到指定位置，只有当内容超出页面出现滚动时才生效
场景：目标路由可能先打开并缓存过，再次进入目标路由需要回滚到最上面
在路由文件中配置
const router = new Router({
routes,
scrollBehavior(to, from, savedPosition) {
console.log(to);
// return 期望滚动到哪个的位置
return {
x: 0,
y: 0,
behavior: "smooth" // 平滑滚动
};
}
});
- 进入目标路由滚动到目标路由的指定锚点，只有当内容超出页面出现滚动时才生效
场景：进入目标路由指定滚动到某个锚点
参数解析：
savedPosition: 点击浏览器的前进回退才生效，获取滚动条的位置
to.hash ：获取目标路由的自定义hash值，在目标路由的url后拼接 #目标路由位置
点击路由跳转时 to.hash 的值是 目标路由位置
在路由文件中
const router = new Router({
routes,
scrollBehavior(to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
if (to.hash) {
return {selector: to.hash}
}
}
}
});
在跳转前的路由组件中，设置path的hash值
this.$router.push({
path: "/group2/page1#position"
});
在目标组件中，定义锚点位置，必须是id
<div id="position" style="background:red">锚点位置</div>
3. 过渡动画
1. 路由动画
- 在index.html中引入animate的cdn动画库
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
- 在 路由出口组件中
<transition
:duration="1000"
mode="out-in"
appear
appear-active-class="fadeIn"
enter-active-class="fadeIn"
leave-active-class="fadeOut"
>
<router-view class="animated"></router-view>
</transition>
2. 组件动画
- 在index.html中引入animate的cdn动画库
<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
- 在组件中使用
- 动画触发条件：显隐的时候触发，添加animate类的时候触发
- 规范：class 中 animate__animated 是必须写的，后面的类是效果类，可在官网右侧列表体验效果，拷贝的类名放置于animate__animated后，此动画即可生效
<template>
<div>
<h1 @click="show = !show">
显隐触发
</h1>
<div class="animate__animated animate__bounce" v-if="show">
动画内容
</div>
<h1 @click="add = !add">
添加animate类时触发
</h1>
<div :class="{ animate__animated: add, animate__bounceIn: add }">
动画内容
</div>
</div>
</template>
<script>
export default {
data() {
return {
show: true,
add: false
};
}
};
</script>
