Question

我正在努力，当我点击一个元素时，会打开一个内容覆盖的叠加层，但我想为它添加一个过渡效果。

这是我的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-trigger类表示单击元素时的叠加层激活器，#expose-mask表示打开叠加层时的背景，.overlay-box类表示#expose-mask类内的内容1}} id，当它打开时。

我想在这个网站上发布这样的信息：http://tympanus.net/Development/ModalWindowEffects/

我想要“滑入（底部）”效果。

我没有使用与此网站相同的代码，所以我不知道如何。这是我的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>

我的CSS代码：

.overlay-box
{
    background-color: #FFFFFF;
    position: fixed;
    top: 35%;
    right: 0;
    left: 0;
    z-index: 4;
    width: 70%;
    margin: 0 auto;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
    -moz-box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 7px;
}

.overlay-box-container
{
    margin: 20px;
}

.overlay-box-closer:before
{
    content: "\f00d";
    position: absolute;
    top: -21px;
    right: -15px;
    cursor: pointer;
    font-size: 40px;
}

#expose-mask
{
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 3;
}

在此处实时预览：http://nextgenfocus.com/test1/点击页脚中的“帮助”文字以打开叠加层。

感谢。

Answer 1

试试这个：

(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);

Answer 2

css transition ::

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 animation：

@-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-box：

-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;

打开叠加层时如何进行转换？

2 个答案: