實(shí)現(xiàn)twitter頁面的這種拉幕效果不是很難。但以前看到anijs官網(wǎng)的那種從下面往上面覆蓋的拉幕效果感覺更好。所以自己就嘗試了下。
這里我希望每個(gè)頁面都有這個(gè)拉幕效果，所以就放在了Layout文件
<template>
<div class="home">
<div class="header">
<blog-header></blog-header>
</div>
<div class="body">
<div class="welcome">
<div class="welcome_msg">
Welcome To
<span class="shake">Percy</span>'s Blog
</div>
</div>
<div class="router-view-area">
<transition name="fade" mode="out-in">
<router-view></router-view>
</transition>
</div>
</div>
<div class="footer"></div>
</div>
</template>
<script lang='ts'>
import { Component, Vue, Watch, Prop } from "vue-property-decorator";
import BlogHeader from "@/components/BlogHeader.vue";
@Component({
components: {
BlogHeader
}
})
export default class extends Vue {}
</script>
<style scoped lang="scss">
.header {
z-index: 999;
position: fixed;
width: 100%;
}
.body {
top: $height-header;
height: $height-excepted-header;
position: relative;
.welcome {
height: $height-welcome;
width: 100%;
position: fixed;
background-color: #f3f6f8;
.welcome_msg {
position: absolute;
font-weight: bold;
top: 160px;
left: 60%;
}
}
.router-view-area {
position: absolute;
height: $height-excepted-header - $height-welcome;
width: 100%;
bottom: 0;
}
.shake-control {
display: inline;
}
}
</style>
效果展示
在這里插入圖片描述
