建立強制回應動畫

強制回應檢視畫面會封鎖使用者介面，以顯示重要訊息。瞭解如何在應用程式中為強制回應檢視畫面建立動畫。

視窗檢視適合用來傳送重要訊息，如果您有許多理由封鎖使用者介面，就能查看這類訊息。使用時請務必小心，因為它們會幹擾使用者，如果過度使用，很容易破壞使用者體驗。但在某些情況下，這些是正確的檢視畫面，加入一些動畫就能讓這些畫面更生動有趣。

• 請少用強制回應檢視，如果不必要的干擾，使用者就會感到很失望。
• 只要在動畫中加入比例，即可營造良好的「下降」效果。
• 當使用者關閉互動視窗時，即可快速清除該檢視畫面。不過，建議您將強制回應畫面放慢在螢幕上，以免使用者受到驚嚇。

強制回應疊加層應對齊可視區域，因此請將其 position 設為 fixed：

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

其初始的 opacity 為 0，因此不會顯示在檢視畫面中，但也必須將 pointer-events 設為 none，這樣點擊和觸控才會通過。否則系統會封鎖所有互動，導致整個網頁沒有回應。最後，由於其 opacity 和 transform 為動畫內容加上動畫效果，因此您必須使用 will-change 標示這些變更 (另請參閱使用變更後的屬性)。

當檢視區塊顯示時，必須接受互動，且 opacity 為 1：

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

現在，每當需要強制檢視時，您都可以使用 JavaScript 切換「顯示」類別：

modal.classList.add('visible');

此時，互動檢視畫面不會顯示任何動畫，因此您現在可以加入該檢視畫面 (另請參閱自訂加/減速一文)：

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

在轉換中加入 scale，會讓檢視畫面稍微拖放到螢幕上，非常好。預設轉場適用於具有自訂曲線且時間長度為 0.1 秒的轉換與不透明度屬性。

但時間很短，但最適合在使用者關閉檢視畫面後返回應用程式時使用。但缺點是，強制回應檢視畫面顯示時可能過於積極。如要修正這個問題，請覆寫 visible 類別的轉換值：

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

現在，強制回應檢視畫面需要 0.3 秒才能顯示在畫面上，雖然較不會積極，但很快就會關閉，因此使用者會很高興。