开发一个沉浸式的天气预报app首页

🕒携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天

前言

最近大部以晴为主，天气良好，温度炎热，虽然我们这里温度不是很高也就32度左右，但是我们公司没有空调，靠电风扇和自然风散热，于是想做个天气预报app,主要是为了防暑降温

🍟制作首页和动画

天空主要色调是蓝色和白色，所以背景色采用天空蓝，下面搭配白色，其实这里是个引导页，点击按钮后有个上滑的动画进入天气页面

//加个动画
animation: forward 2s;

@keyframes forward {
  0% {
    bottom: 0;
  }
  100% {
    bottom: calc(100vh - 800rpx);//下面的白色内容的高度是800rpx
  }
}

但是这样做完下面好像有点不好看，我突然想到单页面网站的效果，我们尝试一下，把天气的首页放到引导页的下面。

刚开始的css样式就是给2区域一个固定的大小，然后绝对定位到底部，但是这样就没法把引导也和天气首页放到一个页面去，所以去掉绝对定位和固定的大小，我们用margin-top，高度用calc(100vh - 800rpx)，其中800rpx是引导页的高度，这样就能适配各种机型了！

看到背景没起来作用，我们增加这样一段css,来修复

page {
  background: #85b3fe;
}

点击按钮，利用vue的动态添加class来实现动画

//template
  :class="{'active':weatherPanel===true}"
          @click="entering"
//data
           weatherPanel: false
//js 
 entering () {
      this.weatherPanel = true
    }
//css
  .active {
    animation: forward 2s;
    margin-top: -800rpx;//结束动画后固定位置
  }
  @keyframes forward {
  0% {
    margin-top: calc(100vh - 800rpx);
  }
  100% {
    margin-top: -800rpx;
  }
}