Javascript 当覆盖层打开时，如何放置过渡？

我正在工作，当我点击一个元素时，会打开一个覆盖，里面有一个内容，但我想给它添加一个过渡效果

以下是我的JavaScript代码：

(function($)
{
    $('.overlay-trigger').click(function(e)
    {
        e.preventDefault();
        $('#expose-mask').css({'display': 'inherit'}).fadeIn(function()
        {
            $('.overlay-box').css({'display': 'inherit'});
        });
    });
    $('#expose-mask, .overlay-box').css({'display': 'none'});
    $('.overlay-box-closer, #expose-mask').click(function()
    {
        $('.overlay-box, #expose-mask').css({'display': 'none'});
        $('#expose-mask');
    });
})(jQuery);

.overlay触发器类表示当我单击某个元素时覆盖的激活器，expose mask表示覆盖打开时的背景，.overlay box类表示打开时暴露掩码id内的内容

我想在这个网站上看到这样的东西：

我想要滑入底部的效果

我没有在这个网站上使用相同的代码，所以我不知道如何使用。以下是我的HTML代码：

<a id="help" class="overlay-trigger" href="help.php">Help</a>
<div class="overlay-box">
<div class="overlay-box-container">
    <span class="overlay-box-closer" title="Close the overlay"></span>
    <h1 class="big-title">Help</h1>
    <p>Your privacy is important to us. To better protect your privacy we provide this notice explaining our online information practices and the choices you can make about the way your information is collected and used. To make this notice easy to find, we make it available in our footer and at every point where personally identifiable information may be requested.Log files are maintained and analysed of all requests for files on this website's web servers. Log files do not capture personal information but do capture the user's IP address, which is automatically recognised by our web servers.</p>
</div>

此处实时预览：单击页脚中的帮助文本以打开覆盖

谢谢。

试试这个：

(function($)
{
    $('.overlay-trigger').click(function(e)
    {
        e.preventDefault();
        $('#expose-mask').show();
        $('.overlay-box').slideDown("slow");        
    });
    $('#expose-mask, .overlay-box').hide();

    $('.overlay-box-closer, #expose-mask').click(function()
    {
        $('.overlay-box, #expose-mask').hide();
    });
})(jQuery);

css转换：：

transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;

css动画：

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

添加到.overlay框：

---

结果完全一样/对不起，我弄错了什么，请参见上文，我编辑了我的帖子。仍然没有更改。：/我想要这样的东西：用动画部署弹出窗口，不是吗？是的，但通常我不需要它。只是缺少了一些东西，我不知道是什么。谢谢，但没有变化：：/我想要这样的东西：也许你的代码中有些不同，我有一个动画：。是的，但我不做这样的工作，伙计。我想在这个网站上进行如下转换：

@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20px);
    -ms-transform: translateY(20px);
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

-webkit-animation-name: fadeInUp;
-webkit-animation-fill-mode: flash;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
-moz-animation-name: fadeInUp;
-moz-animation-fill-mode: both;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
animation-name: fadeInUp;
animation-fill-mode: both;
animation-duration: 1s;
animation-iteration-count: 1;
animation-timing-function: linear;