Как я могу поместить переход, когда открывается мой оверлей?

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 id, когда он открыт.

Я хотел бы что-то вроде этого, на этом сайте: http://tympanus.net/Development/ModalWindowEffects/

Я хотел бы иметь «Slide в (внизу)» эффект.

Я не использую тот же код, что и на этом сайте, поэтому я не знаю, как это сделать. Вот мой 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; 
} 

Live Preview здесь: 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: 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-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;