探索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;