新手村05 - Flex Panel Gallery

11th鐵人賽 javascript 前端新手村

Chester

2019-09-20 07:25:54

1069 瀏覽

分享至

05 - Flex Panel Gallery

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

功能（CSS居多）
- 點擊指定的區塊有兩段式的動畫變化
- 再點擊一次，恢復原狀
畫面
- 改用 Flex 排版
- 標籤 p 中間的字變大
- 變大之後上下的字要進來

index_START.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Flex Panels ?</title>
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'>
</head>
<body>
  <style>
    html {
      box-sizing: border-box;
      background: #ffc600;
      font-family: 'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }
    
    body {
      margin: 0;
    }
    
    *, *:before, *:after {
      box-sizing: inherit;
    }

    .panels {
      min-height: 100vh;
      overflow: hidden;
    }

    .panel {
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
      color: white;
      text-align: center;
      align-items: center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;
    }

    .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
    .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
    .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
    .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
    .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }

    /* Flex Children */
    .panel > * {
      margin: 0;
      width: 100%;
      transition: transform 0.5s;
    }

    .panel p {
      text-transform: uppercase;
      font-family: 'Amatic SC', cursive;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
      font-size: 2em;
    }
    
    .panel p:nth-child(2) {
      font-size: 4em;
    }

    .panel.open {
      font-size: 40px;
    }

  </style>
  <div class="panels">
    <div class="panel panel1">
      <p>Hey</p>
      <p>Let's</p>
      <p>Dance</p>
    </div>
    <div class="panel panel2">
      <p>Give</p>
      <p>Take</p>
      <p>Receive</p>
    </div>
    <div class="panel panel3">
      <p>Experience</p>
      <p>It</p>
      <p>Today</p>
    </div>
    <div class="panel panel4">
      <p>Give</p>
      <p>All</p>
      <p>You can</p>
    </div>
    <div class="panel panel5">
      <p>Life</p>
      <p>In</p>
      <p>Motion</p>
    </div>
  </div>
</body>
</html>

CSS - step by step

原本的 .panels 為直行，現在透過 flex 來改變排列方式，變為橫排並將內容 .panel 佔據整個版面一等份

<style>
    /* 上略 */
    .panels {
      min-height: 100vh;
      overflow: hidden;
      display: flex; 
			/* flex 橫排 */      
    }

    .panel {
    	flex: 1; 
      /* 均等份 */
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
      color: white;
      text-align: center;
      align-items: center;
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;
    }
    /* 下略 */
  </style>

Flex 主軸為橫向（文字會左到右），內層的 .panel 要來改變主軸方向並置中

<style>
    /* 上略 */
    .panels {
      min-height: 100vh;
      overflow: hidden;
      display: flex;  
    }

    .panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      /* 改變主軸方向並置中 */
      
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
      color: white;
      text-align: center;
      align-items: center;
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;
    }
    /* 下略 */
</style>

子層 .panel > * 也要有垂直置中效果，並讓上下的標籤 p 文字偏移出去中間的標籤 p 文字後才能加入動畫

<style>
    /* 上略 */

    .panels {
      min-height: 100vh;
      overflow: hidden;
      display: flex;  
    }

    .panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
      color: white;
      text-align: center;
      align-items: center;
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;
    }

    /* 略 */

    /* Flex Children */
    .panel > * {
      margin: 0;
      width: 100%;
      transition: transform 0.5s;

			/* 等份並垂直置中 */
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
  	/* 上下的文字偏移中間的文字 */
  	.panel > *:first-child{
      transform: translateY(-100%);
    }
    .panel > *:last-child{
      transform: translateY(100%);
    }
  
  	/* JS時需要toggle的class 讓文字偏移回來 */
    .panel.open-active > *:first-child{
      transform: translateY(0%);
    }
    .panel.open-active > *:last-child{
      transform: translateY(0%);
    }
		/* JS時需要toggle的class 文字放大及flex等份要變大 */
  	.panel.open {
      font-size: 40px;
      flex: 3;
    }
    /* 下略 */
</style>

JS - step by step

首先，抓出整個外層的 NodeList 並設為變數 panels 吧！忘記有 All 跟沒有 All 的差別可以看 Day 1 JavaScript Drum Kit 的文章，或者在這個程式碼中直接 console.log 印出來看看～

<script>
    const panels = document.querySelectorAll(".panel")
    console.log(panels)

		// NodeList(5) [div.panel.panel1, div.panel.panel2, div.panel.panel3, 
    // div.panel.panel4, div.panel.panel5]
</script>

記得 panels 不是一個陣列所以透過 foreach 讀出每個 List，方法中監聽假設使用者有 click 的話，就會呼叫方法 clickHandler

<script>
    const panels = document.querySelectorAll(".panel")
    panels.forEach(function(panel){
      panel.addEventListener('click',clickHandler)
    })
</script>

clickHandler 方法來對 .panel 增加 Class .panel.open (字體放大、Flex 等份變大)，因為要能放大後再點又能縮小，所以用 toggle 來新增、移除，與Jquery的概念相同，對應如下：

JS：classList.add / classList.remove / classList.toogle

Jquery：addClass / removeClass / googleClass

<script>  
    const panels = document.querySelectorAll(".panel")
    panels.forEach(function(panel){
      panel.addEventListener('click',clickHandler)
    })
    function clickHandler(){
      this.classList.toggle('open')
    }
</script>

現在要來做第二段動畫，在這邊我們希望在第一段動畫完成之後再做第二段動畫，所以我們來 transitionend 呼叫 transitionendHandler 方法看看 click 動畫結束後回傳什麼

<script>
    const panels = document.querySelectorAll(".panel")
    panels.forEach(function(panel){
      panel.addEventListener('click',clickHandler)
      panel.addEventListener('transitionend',transitionendHandler)
    })
    function clickHandler(){
      this.classList.toggle('open')
    }
    function transitionendHandler(e){
      console.log(e)
    }
</script>

// TransitionEvent {isTrusted: true, propertyName: "font-size", elapsedTime: 0.7, pseudoElement: "", type: "transitionend", …}
// TransitionEvent {isTrusted: true, propertyName: "flex-grow", elapsedTime: 0.7, pseudoElement: "", type: "transitionend", …}

看到了觸發兩個事件有什麼關聯呢？其實會有個Bug，因為假設直接寫了 toogle 在 transitionendHandler 中的話，事件有兩個所以被觸發了兩次，導致上下的文字進來了又出去，但如果今天回傳的事件是奇數又會可以觸發。因此，我們要寫個判斷式來觸發 Class open-active

<script>
    const panels = document.querySelectorAll(".panel")
    panels.forEach(function(panel){
      panel.addEventListener('click',clickHandler)
      panel.addEventListener('transitionend',transitionendHandler)
    })
    function clickHandler(){
      this.classList.toggle('open')
    }
    function transitionendHandler(e){
      console.log(e)
      if(e.propertyName.indexOf('flex') !== -1){
        this.classList.toggle('open-active')
      }
    }
</script>

indexOf()：方法會回傳給定元素於陣列中第一個被找到之索引，若不存在於陣列中則回傳 -1。

Array.prototype.indexOf()：https://ubin.io/zgWY3u

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];

console.log(beasts.indexOf('bison'));
// expected output: 1

console.log(beasts.indexOf('bison', 2));
// expected output: 4

console.log(beasts.indexOf('giraffe'));
// expected output: -1

就大功告成啦！

CSS - Final

<style>
    html {
      box-sizing: border-box;
      background: #ffc600;
      font-family: 'helvetica neue';
      font-size: 20px;
      font-weight: 200;
    }
    
    body {
      margin: 0;
    }
    
    *, *:before, *:after {
      box-sizing: inherit;
    }

    .panels {
      min-height: 100vh;
      overflow: hidden;
      display: flex;  
    }

    .panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1);
      color: white;
      text-align: center;
      align-items: center;
      transition:
        font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
        background 0.2s;
      font-size: 20px;
      background-size: cover;
      background-position: center;
    }

    .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
    .panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
    .panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
    .panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
    .panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }

    /* Flex Children */
    .panel > * {
      margin: 0;
      width: 100%;
      transition: transform 0.5s;
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .panel p {
      text-transform: uppercase;
      font-family: 'Amatic SC', cursive;
      text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
      font-size: 2em;
    }
    
    .panel > *:first-child{
      transform: translateY(-100%);
    }
    .panel > *:last-child{
      transform: translateY(100%);
    }
    .panel.open-active > *:first-child{
      transform: translateY(0%);
    }
    .panel.open-active > *:last-child{
      transform: translateY(0%);
    }
    
    .panel p:nth-child(2) {
      font-size: 4em;
    }

    .panel.open {
      font-size: 40px;
      flex: 3;
    }
</style>

JS - Final

<script>
    const panels = document.querySelectorAll(".panel")
    panels.forEach(function(panel){
      panel.addEventListener('click',clickHandler)
      panel.addEventListener('transitionend',transitionendHandler)
    })
    function clickHandler(){
      this.classList.toggle('open')
    }
    function transitionendHandler(e){
      console.log(e)
      if(e.propertyName.indexOf('flex') !== -1){
        this.classList.toggle('open-active')
      }
    }
 </script>

本刊同步於個人網站：http://chestertang.site/
本次範例程式碼原作者來源：https://reurl.cc/M7Z0xW