探索spa单页面（transform隐藏显示后动画）

前言

本次主题只要探究的是spa单页面之间的相互滑动切换。

何为spa单页面：单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。

我理解的是他更像一个弱化app应用，也就是层与层的切换（也就是显示隐藏），body就是那个最大的父盒子，每个层就是一个div（子盒子）。

先看代码

• css

  body,html {width: 100%;height: 100%;margin: 0;padding: 0;overflow: hidden;}
  .viewport {width: 100%;height: 100%;display: -webkit-box;overflow: hidden;backface-visibility: hidden;position: relative;}
  .pageview {position: absolute;top: 0;left: 0;display: none;width: 100%;height: 100%;text-align: center;color: #ffffff;}
  .page-block {display: block;}
  .pagecurr {animation: pageRight 400ms forwards;}

  @keyframes pageRight {
    from {transform: translate3d(100%, 0, 0);opacity: .9;}
    to {transform: translate3d(0, 0, 0);opacity: 1;}
  }

• html

  <div id="viewport" class="viewport">
    <div class="pageview page-block" style="background: #3b76c0;">
      <h3>页面-1</h3>
    </div>
    <div class="pageview" style="background: #58c03b;">
      <h3>页面-2</h3>
    </div>
    <div class="pageview" style="background: #c03b25;">
      <h3>页面-3</h3>
    </div>
  </div>

• js

  var els = document.querySelectorAll('.pageview')
  for (var i = 0; i < els.length; i++) {
    binds(els[i], i + 1)
  }

  function binds(el, n) {
    el.onclick = function () {
      console.log(this)
      this.className = 'pageview'
      addClass(n)
    }
  }

  function addClass(n) {
    for (var i = 0; i < els.length; i++) {
      if (i === n) {
        console.log('addClass', els[i], i)
        els[i].className = 'pageview pagecurr page-block'
      }
    }
  }

问题

这个问题有点小坑，也是困扰了许久。想让display从none变为block，或者从block变为none时，实现这样的动画效果大多数人都会采用transition。然而可惜的是transition并不支持display。

之前的思路是设置元素显示前：

div{display: none;transform: translate3d(100%, 0, 0)}

设置元素显示后：

div{display: block;transform: translate3d(0, 0, 0)}

所以后面改变思路，采用 @keyframes + animation 完成动画

@keyframes + animation

• keyframes是CSS3才引进的 .. 使用方法是前面@keyframes Demo , Demo是自定义动画名字

• 仅支持百分比为进度条和form-to!!!!两者可以混用

  • animation有八个参数,可以分开写,可以综合写(一般一起写);
  • animation-name 规定 @keyframes 动画的名称。
  • animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。
  • animation-timing-function 规定动画的速度曲线。默认是 “ease”。
  • animation-delay 规定动画何时开始。默认是 0。
  • animation-iteration-count 规定动画被播放的次数。默认是 1。
  • animation-direction 规定动画是否在下一周期逆向地播放。默认是 “normal”。
  • animation-play-state 规定动画是否正在运行或暂停。默认是 “running”。
  • animation-fill-mode 定义动画播放时间之外的状态,顾名思义，要么就是在动画播放完了之后给它一个状态none|forwards|backwards|both；none，播放完之后不改变默认行为，默认值；forwards则是停在动画最后的的那个画面；backwards则是回调到动画最开始出现的画面；both则应用为动画结束或开始的状态

  综合写法: animation : name 1s linear 1s inifinite alternate running both;