vue模仿twitter写一个自己的博客——拉幕效果

实现twitter页面的这种拉幕效果不是很难。但以前看到anijs官网的那种从下面往上面覆盖的拉幕效果感觉更好。所以自己就尝试了下。
这里我希望每个页面都有这个拉幕效果，所以就放在了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>

效果展示

项目地址

https://github.com/pppercyWang/twitter-blog-vue