學習目標

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

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

modal css style

接下來，是 .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