html - CSS3/HTML 动画位置 :fixed div onto page

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;

fiddle :https://jsfiddle.net/dt2j6872/1/