使用CSS3（和一點JavaScript）建立一個非畫布側面選單
阿新 • • 發佈：2018-12-12
使用
visibility:hidden了不支援CSS3的瀏覽器translate3d()值
的內部#offcanvas-menu元素，我們新增 visibility:hidden了瀏覽器的緣故不支援CSS3的 translate3d()，即IE9及以下，抵消並初步隱藏選單。但是新增此屬性會使CSS3轉換更棘手。我們想要的是我們的選單元素在從關閉轉換為開啟時立即可見，因此在此期間，使用者可以看到正在轉換的其他屬性。但是，對於從開啟到關閉的轉換，我們希望選單元素保持可見，直到其他屬性轉換完成為止; 換句話說，我們想要在之前設定延遲visibility:hidden適用於那種情況。要根據轉換的方向完成兩種不同的行為，最初，我們在transitiontransition: transform 0.5s, visibility 0s 0.5s; /* transition settings. */
這裡我們指定transform屬性應該轉換超過0.5秒，而對於visibility屬性，它應該立即完成而不轉換，但僅在延遲0.5秒後（第二個數值指定延遲）。這樣的設定可以解決選單從 開啟到關閉時所需的延遲 - 我們希望在隱藏選單之前延遲0.5秒，其他屬性轉換為完成所需的時間。現在，這仍然使得可見性行為的另一部分不完整，這使得當選單從關閉轉換為開啟時，可見性屬性在應用時沒有延遲。注意：可以在此處找到關於涉及visibility屬性的CSS3過渡主題的良好讀物 。