CSS3/HTML動畫位置：固定div到頁面

Question

我有一個小的僞模態，我爲我的應用程序構建，當用戶單擊按鈕時，它會佔用屏幕一會兒。我已將它設置爲固定位置，以便可以超過用戶的整個屏幕。我把它展示，現在就躲在與display: block和display: none之間只需切換，我的CSS現在看起來就像這樣：

（SCSS）：

.sort-fullscreen { 
    display: none; 
    top: 0; 
    left: 0; 
    right: 0; 
    height: 100vh; 
    width: 100vw; 
    background-color: $modal-bg-color; 
    position: fixed; 
    z-index: 101; 
    transition: all 0.5; 

    &.open { 
     display: block; 
    } 
} 

而存在的僅僅是

<div class="sort-fullscreen"> 
    ... users content 
</div> 

坐在我的頁面底部。

所以這工作正常，但我想弄清楚是否有一種方法來固定進入頁面固定位置的動畫 - 也許滑動和關閉？

開始 - 我想是這樣的

.sort-fullscreen { 
    display: block; 
    top: 0; 
    left: -100%; 
    right: 0; 
    height: 100vh; 
    width: 100vw; 
    background-color: $modal-bg-color; 
    position: fixed; 
    z-index: 101; 
    transition: all 0.5; 

    &.open { 
     left: 0%; 
    } 
} 

然而，這似乎並沒有爲我工作。我似乎無法找到一種乾淨的方式來爲固定在頁面上的位置設置動畫效果。任何幫助如何實現這一點，將不勝感激。謝謝！

Answer 1

您的代碼似乎對我的工作，儘管在你的過渡時間增加 'S' 之後：

transition: all 0.5s; 

小提琴：https://jsfiddle.net/dt2j6872/1/