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/