強制回應檢視畫面會封鎖使用者介面,以顯示重要訊息。瞭解如何在應用程式中為強制回應檢視畫面建立動畫。
視窗檢視適合用來傳送重要訊息,如果您有許多理由封鎖使用者介面,就能查看這類訊息。使用時請務必小心,因為它們會幹擾使用者,如果過度使用,很容易破壞使用者體驗。但在某些情況下,這些是正確的檢視畫面,加入一些動畫就能讓這些畫面更生動有趣。
- 請少用強制回應檢視,如果不必要的干擾,使用者就會感到很失望。
- 只要在動畫中加入比例,即可營造良好的「下降」效果。
- 當使用者關閉互動視窗時,即可快速清除該檢視畫面。不過,建議您將強制回應畫面放慢在螢幕上,以免使用者受到驚嚇。
強制回應疊加層應對齊可視區域,因此請將其 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 秒才能顯示在畫面上,雖然較不會積極,但很快就會關閉,因此使用者會很高興。