Angular modal-backdrop

Angular Custom Modal - 共用元件實作 - 彈窗 (2)

陳建融 Randy Chen 2022/05/24 14:47:45
96

學習目標

  1. 接續第一篇製作的彈窗共用元件,接著為它製作 遮罩 和 漸入 的 css 效果

預期彈窗效果

  1. 當點擊開啟彈窗的按鈕,會有黑色的遮罩出現,然後,彈窗從畫面上方降下來

HTML Layout

先來說明一下,整體彈窗元件構成的 HTML 布局

// --- modal.component.html --- //
<div class="modal" [class.show]="show | async">
  <div class="modal-body">
    <ng-content></ng-content>
    <p>
      <button type="button">關閉</button>
    </p>
  </div>
</div>

<div class="modal-backdrop" [class.show]="show | async"></div>

以上的 HTML 整體構圖概念是,
.modal-backdrop 會在 modal 區塊的下方,填滿整個畫面並呈現半透明的黑色。

.modal 就是會是一張透明填滿整個畫面的區塊
.modal-body 這個區塊就會疊在 .modal 的上面,負責呈現彈窗內容。

 

modal-backdrop css style

以下是 遮罩 的 css style 內容

// --- modal.component.scss --- //
.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: black;
  z-index: -1;
  opacity: 0;

  &.show {
    z-index: 900;
    opacity: 0.6;
    transition: opacity 1s;
  }
}

先利用 positiontop 等相關 css style 設定讓 modal-backdrop 撐滿整個畫面。
z-index: -1 和 opacity: 0 是讓 modal-backdrop 一開始看不見,且不會擋到別人。
最後,當 modal-backdrop 的 class 加入 show 之後,會利用 transition: opacity 1s 的效果,讓 modal-backdrop 漸漸地出現。

接下來,是 .modal 的 css style

// --- modal.component.scss --- //
.modal {
  position: fixed:
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
  opacity: 0;

  .modal-body {
    max-width: 500px;
    background-color: white;
    margin: 0 auto;
  }
}

.modal.show {
  z-index: 1000;
  animation: opacityShow 1s;
  animation-fill-mode: forwards;

  .modal-body {
    animation: modalShow 1s;
    animation-fill-mode: forwards;
  }
}

@keyframe opacityShow {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframe modalShow {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(20%);
  }
}

 

.modal 就是一個撐滿整個畫面的透明薄膜,上面疊著 .modal-body。
.modal-body 就是主要呈現彈窗內容的區塊。

當 .modal 加入 show 這個 class 的時候,
.modal 會吃到 opacityShow 的動畫效果,從透明 (opacity: 0) 變成完整呈現 (opacity: 1)。

而 .modal-body 也會同時吃到另一個 modalShow 特效,呈現漸入的效果。

以上的內容,就是製作彈窗漸入和彈窗遮罩的 css style 內容

 

------------------------------------------------------------  我是分隔線 ------------------------------------------------------------

CSS Style Problem

以下就是在製作彈窗漸入效果的時候,有可能會遇到的 css style 的問題

animation-fill-mode: forwards

可以發現在 scss 中有特別加入以上的 animation-fill-mode: forwards 的設定。
這一行的效果為,讓被加入這個 css style 設定的元素,會保留 animation 最終的效果。

什麼意思呢? 以本篇的 modalShow 這個特效為例:

@keyframe modalShow {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(20%);
  }
}

最終的特效效果為 transform: translateY(20%),所以,該區塊最後會保留這個 css style 囉。
如果,不加入 animation-fill-mode: forwards 的話,彈窗的位置會被重製喔,像下面這張動畫一樣

結論

  1. 本篇紀錄怎麼製作彈窗元件的 遮罩 和 漸入 的 css style
  2. 透過 animation-fill-mode: forward 來修正當漸入的動畫結束之後,彈窗的位置又被重製回原本位置的問題。

Reference

  1. the reason why z-index is not working
  2. animation-fill-mode usage

 

 

 

 

 

 

陳建融 Randy Chen