iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0
自我挑戰組

JavaScript 30 挑戰日誌系列 第 5

Day 05:使用 class 控制 flex

  • 分享至 

  • xImage
  •  

作品 Demo 連結: 傳送門

作品目標:點選畫面欄位會動畫式展開,並有文字向中心靠齊
難易度:★☆☆☆☆

HTML

<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>

CSS 於此列出有關動畫和 Flex 的部分

.panels {
    // ...略
    display: flex;
}

.panel {
  // ...略
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.panel > * {
    // ...略
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel > *:first-child{ transform: translateY(-100%); }
.panel.open-active > *:first-child{ transform: translateY(0); }
.panel > *:last-child{ transform: translateY(100%); }
.panel.open-active > *:last-child{ transform: translateY(0); }

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

其實這次作者似乎是把重心放在 CSS 的 Flex 之上
但 Flex 並不是我們這次的重點
有興趣的可以上網爬爬文 =)


【第一步:綁定事件】

const panels = document.querySelectorAll('.panel');

panels.forEach(panel => panel.addEventListener('click', toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

這次打算裡用增刪 class 來使用 transition 的動畫效果
總共有兩個功能性的 class:
1. .open:加大寬度和放大字體
2. .open-active:上下的字滑入

我們就先綁定 click 事件,點擊之後自動增刪 .open 這個 class
之後再綁定 transitionend 事件,在 .open 的過渡效果結束後在讓上下字體滑入

【第二步:撰寫】

function toggleOpen(){
  this.classList.toggle('open');
}

function toggleActive(e){
    if(e.propertyName.includes('flex'))
        this.classList.toggle('open-active');
}

在這裡我們會接觸到新的 .classList !
.classList 最常用的會有三種功能
1. .add()
2. .remove()
3. .toggle()

是不是很眼熟!?
沒錯,其實就是 jQuery 裏頭的
addClass(), removeClass(), toggleClass()
這一家人!!

而第二步驟則是先判斷 是否有屬性名稱有包含 flex
有的話則執行 .toggle()


今天的內容有點簡短,終於可以不用那麼趕了~

LEVEL UP!!!


上一篇
Day 04:陣列習題 (1)
下一篇
Day 06:搜尋地區名稱
系列文
JavaScript 30 挑戰日誌8
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言