Nie mogę uzyskać animacji typu magnific-popup do pracy

Question

Przeszedłem przez znakomitą dokumentację i to jest świetne. http://dimsemenov.com/plugins/magnific-popup/documentation.html Mam podstawowy pop-up działający bez zarzutu.

Mój problem dotyczy animacji. Po prostu nie mogę ich zmusić do pracy. Przepraszam, jeśli przeoczyłem coś bardzo prostego, ale spędziłem na to zbyt długo i mam nadzieję, że ktoś może wskazać mój błąd. Obecnie wydaje się, że nic nie zniknie.

Grałem z tym na codepen i mogę odtworzyć problem przez usunięcie CSS, więc być może to nie przechodzi poprawnie, chociaż wiem, że to jest łączenie, ponieważ jest to styl pop-up, a nie animacje.

Tu jest mój HTML:

<div id="Column1"><div id="aboutus" > 
<div id="pop" > 

    <a href="/stalkseed/assets/Uploads/stalk-seed-about-us.jpg" data-effect="mfp-newspaper" title="" alt="" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about-us','','/stalkseed/assets/Uploads/aboutus-ovr.jpg',1)"><img src="/stalkseed/assets/Uploads/aboutus.jpg" name="about-us" border="0" id="about-us"/></a> 

</div> 

Moja JavaScript z tej samej strony:

<script type="text/javascript">//<![CDATA[ 
$(document).ready(function() { 
$('#pop').magnificPopup({ 
    delegate: 'a', 
    type: 'image', 
    removalDelay: 500, //delay removal by X to allow out-animation 
    callbacks: { 
    beforeOpen: function() { 
     // just a hack that adds mfp-anim class to markup 
     this.st.image.markup = this.st.image.markup.replace('mfp-figure', 'mfp-figure mfp-with-anim'); 
     this.st.mainClass = this.st.el.attr('data-effect'); 
    } 
    }, 
    closeOnContentClick: true, 
    midClick: true // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source. 

});}); 
//]]> 
</script> 

Moje CSS

@charset "UTF-8"; 
/* CSS Document */ 

/* Magnific Popup CSS */ 
.mfp-bg { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 502; 
    overflow: hidden; 
    position: fixed; 
    background: #0b0b0b; 
    opacity: 0.8; 
    filter: alpha(opacity=80); } 

.mfp-wrap { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 503; 
    position: fixed; 
    outline: none !important; 
    -webkit-backface-visibility: hidden; } 

.mfp-container { 
    height: 100%; 
    text-align: center; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
    padding: 0 8px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; } 

.mfp-container:before { 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; } 

.mfp-align-top .mfp-container:before { 
    display: none; } 

.mfp-content { 
    position: relative; 
    display: inline-block; 
    vertical-align: middle; 
    margin: 0 auto; 
    text-align: left; 
    z-index: 505; } 

.mfp-inline-holder .mfp-content, 
.mfp-ajax-holder .mfp-content { 
    width: 100%; 
    cursor: auto; } 

.mfp-ajax-cur { 
    cursor: progress; } 

.mfp-zoom-out-cur, 
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { 
    cursor: -moz-zoom-out; 
    cursor: -webkit-zoom-out; 
    cursor: zoom-out; } 

.mfp-zoom { 
    cursor: pointer; 
    cursor: -webkit-zoom-in; 
    cursor: -moz-zoom-in; 
    cursor: zoom-in; } 

.mfp-auto-cursor .mfp-content { 
    cursor: auto; } 

.mfp-close, 
.mfp-arrow, 
.mfp-preloader, 
.mfp-counter { 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    user-select: none; } 

.mfp-loading.mfp-figure { 
    display: none; } 

.mfp-hide { 
    display: none !important; } 

.mfp-preloader { 
    color: #cccccc; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    text-align: center; 
    margin-top: -0.8em; 
    left: 8px; 
    right: 8px; 
    z-index: 504; } 

.mfp-preloader a { 
    color: #cccccc; } 

.mfp-preloader a:hover { 
    color: white; } 

.mfp-s-ready .mfp-preloader { 
    display: none; } 

.mfp-s-error .mfp-content { 
    display: none; } 

button.mfp-close, 
button.mfp-arrow { 
    overflow: visible; 
    cursor: pointer; 
    background: transparent; 
    border: 0; 
    -webkit-appearance: none; 
    display: block; 
    padding: 0; 
    z-index: 506; } 

button::-moz-focus-inner { 
    padding: 0; 
    border: 0; } 

.mfp-close { 
    width: 44px; 
    height: 44px; 
    line-height: 44px; 
    position: absolute; 
    right: 0; 
    top: 0; 
    text-decoration: none; 
    text-align: center; 
    opacity: 0.65; 
    padding: 0 0 18px 10px; 
    color: white; 
    font-style: normal; 
    font-size: 28px; 
    font-family: Arial, Baskerville, monospace; } 
    .mfp-close:hover, .mfp-close:focus { 
    opacity: 1; } 
    .mfp-close:active { 
    top: 1px; } 

.mfp-close-btn-in .mfp-close { 
    color: #333333; } 

.mfp-image-holder .mfp-close, 
.mfp-iframe-holder .mfp-close { 
    color: white; 
    right: -6px; 
    text-align: right; 
    padding-right: 6px; 
    width: 100%; } 

.mfp-counter { 
    position: absolute; 
    top: 0; 
    right: 0; 
    color: #cccccc; 
    font-size: 12px; 
    line-height: 18px; } 

.mfp-arrow { 
    position: absolute; 
    top: 0; 
    opacity: 0.65; 
    margin: 0; 
    top: 50%; 
    margin-top: -55px; 
    padding: 0; 
    width: 90px; 
    height: 110px; 
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 

.mfp-arrow:active { 
    margin-top: -54px; } 

.mfp-arrow:hover, 
.mfp-arrow:focus { 
    opacity: 1; } 

.mfp-arrow:before, .mfp-arrow:after, 
.mfp-arrow .mfp-b, 
.mfp-arrow .mfp-a { 
    content: ''; 
    display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin-top: 35px; 
    margin-left: 35px; 
    border: solid transparent; } 
.mfp-arrow:after, 
.mfp-arrow .mfp-a { 
    opacity: 0.8; 
    border-top-width: 12px; 
    border-bottom-width: 12px; 
    top: 8px; } 
.mfp-arrow:before, 
.mfp-arrow .mfp-b { 
    border-top-width: 20px; 
    border-bottom-width: 20px; } 

.mfp-arrow-left { 
    left: 0; } 
    .mfp-arrow-left:after, 
    .mfp-arrow-left .mfp-a { 
    border-right: 12px solid black; 
    left: 5px; } 
    .mfp-arrow-left:before, 
    .mfp-arrow-left .mfp-b { 
    border-right: 20px solid white; } 

.mfp-arrow-right { 
    right: 0; } 
    .mfp-arrow-right:after, 
    .mfp-arrow-right .mfp-a { 
    border-left: 12px solid black; 
    left: 3px; } 
    .mfp-arrow-right:before, 
    .mfp-arrow-right .mfp-b { 
    border-left: 20px solid white; } 

.mfp-iframe-holder { 
    padding-top: 40px; 
    padding-bottom: 40px; } 

.mfp-iframe-holder .mfp-content { 
    line-height: 0; 
    width: 100%; 
    max-width: 900px; } 

.mfp-iframe-scaler { 
    width: 100%; 
    height: 0; 
    overflow: hidden; 
    padding-top: 56.25%; } 

.mfp-iframe-scaler iframe { 
    position: absolute; 
    display: block; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); 
    background: black; } 

.mfp-iframe-holder .mfp-close { 
    top: -40px; } 

/* Main image in popup */ 
img.mfp-img { 
    width: auto; 
    max-width: 100%; 
    height: auto; 
    display: block; 
    line-height: 0; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    padding: 40px 0 40px; 
    margin: 0 auto; } 

/* The shadow behind the image */ 
.mfp-figure:after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 40px; 
    bottom: 40px; 
    display: block; 
    right: 0; 
    width: auto; 
    height: auto; 
    z-index: -1; 
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } 

.mfp-figure { 
    line-height: 0; } 

.mfp-bottom-bar { 
    margin-top: -36px; 
    position: absolute; 
    top: 100%; 
    left: 0; 
    width: 100%; 
    cursor: auto; } 

.mfp-title { 
    text-align: left; 
    line-height: 18px; 
    color: #f3f3f3; 
    word-break: break-word; 
    padding-right: 36px; } 

.mfp-figure small { 
    color: #bdbdbd; 
    display: block; 
    font-size: 12px; 
    line-height: 14px; } 

.mfp-image-holder .mfp-content { 
    max-width: 100%; } 

.mfp-gallery .mfp-image-holder .mfp-figure { 
    cursor: pointer; } 

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { 
    /** 
    * Remove all paddings around the image on small screen 
    */ 
    .mfp-img-mobile .mfp-image-holder { 
    padding-left: 0; 
    padding-right: 0; } 

    .mfp-img-mobile img.mfp-img { 
    padding: 0; } 

    /* The shadow behind the image */ 
    .mfp-img-mobile .mfp-figure:after { 
    top: 0; 
    bottom: 0; } 

    .mfp-img-mobile .mfp-bottom-bar { 
    background: rgba(0, 0, 0, 0.6); 
    bottom: 0; 
    margin: 0; 
    top: auto; 
    padding: 3px 5px; 
    position: fixed; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; } 

    .mfp-img-mobile .mfp-bottom-bar:empty { 
    padding: 0; } 

    .mfp-img-mobile .mfp-counter { 
    right: 5px; 
    top: 3px; } 

    .mfp-img-mobile .mfp-close { 
    top: 0; 
    right: 0; 
    width: 35px; 
    height: 35px; 
    line-height: 35px; 
    background: rgba(0, 0, 0, 0.6); 
    position: fixed; 
    text-align: center; 
    padding: 0; } 

    .mfp-img-mobile .mfp-figure small { 
    display: inline; 
    margin-left: 5px; } } 
@media all and (max-width: 800px) { 
    .mfp-arrow { 
    -webkit-transform: scale(0.75); 
    transform: scale(0.75); } 

    .mfp-arrow-left { 
    -webkit-transform-origin: 0; 
    transform-origin: 0; } 

    .mfp-arrow-right { 
    -webkit-transform-origin: 100%; 
    transform-origin: 100%; } 

    .mfp-container { 
    padding-left: 6px; 
    padding-right: 6px; } } 
.mfp-ie7 .mfp-img { 
    padding: 0; } 
.mfp-ie7 .mfp-bottom-bar { 
    width: 600px; 
    left: 50%; 
    margin-left: -300px; 
    margin-top: 5px; 
    padding-bottom: 5px; } 
.mfp-ie7 .mfp-container { 
    padding: 0; } 
.mfp-ie7 .mfp-content { 
    padding-top: 44px; } 
.mfp-ie7 .mfp-close { 
    top: 0; 
    right: 0; 
    padding-top: 0; } 

    /*html,body {margin:0; padding:10px; -webkit-backface-visibility:hidden; 
    background-color: #eee3da; 
}*/ 


/* text-based popup styling */ 
.white-popup { 
    position: relative; 
    background: #FFF; 
    padding: 25px; 
    width:auto; 
    max-width: 400px; 
    margin: 0 auto; 
} 


/* 

====== Zoom effect ====== 

*/ 
.mfp-zoom-in { 

    /* start state */ 
    .mfp-with-anim { 
    opacity: 0; 
    transition: all 0.2s ease-in-out; 
    transform: scale(0.8); 
    } 

    &.mfp-bg { 
    opacity: 0; 
     transition: all 0.3s ease-out; 
    } 

    /* animate in */ 
    &.mfp-ready { 
    .mfp-with-anim { 
     opacity: 1; 
     transform: scale(1); 
    } 
    &.mfp-bg { 
     opacity: 0.8; 
    } 
    } 

    /* animate out */ 
    &.mfp-removing { 

    .mfp-with-anim { 
     transform: scale(0.8); 
     opacity: 0; 
    } 
    &.mfp-bg { 
     opacity: 0; 
    } 

    } 

} 


/* 

====== Newspaper effect ====== 

*/ 
.mfp-newspaper { 

    /* start state */ 
    .mfp-with-anim { 
    opacity: 0; 
    -webkit-transition: all 0.2s ease-in-out; 
    transition: all 0.5s; 

    transform: scale(0) rotate(500deg); 
    } 

    &.mfp-bg { 
    opacity: 0; 
     transition: all 0.5s; 
    } 

    /* animate in */ 
    &.mfp-ready { 
    .mfp-with-anim { 
     opacity: 1; 
     transform: scale(1) rotate(0deg); 
    } 
    &.mfp-bg { 
     opacity: 0.8; 
    } 
    } 

    /* animate out */ 
    &.mfp-removing { 

    .mfp-with-anim { 
     transform: scale(0) rotate(500deg); 
     opacity: 0; 
    } 
    &.mfp-bg { 
     opacity: 0; 
    } 

    } 

} 



/* 

====== Move-horizontal effect ====== 

*/ 
.mfp-move-horizontal { 

    /* start state */ 
    .mfp-with-anim { 
    opacity: 0; 
    transition: all 0.3s; 

    transform: translateX(-50px); 
    } 

    &.mfp-bg { 
    opacity: 0; 
     transition: all 0.3s; 
    } 

    /* animate in */ 
    &.mfp-ready { 
    .mfp-with-anim { 
     opacity: 1; 
     transform: translateX(0); 
    } 
    &.mfp-bg { 
     opacity: 0.8; 
    } 
    } 

    /* animate out */ 
    &.mfp-removing { 

    .mfp-with-anim { 
     transform: translateX(50px); 
     opacity: 0; 
    } 
    &.mfp-bg { 
     opacity: 0; 
    } 

    } 

} 


/* 

====== Move-from-top effect ====== 

*/ 
.mfp-move-from-top { 

    .mfp-content { 
    vertical-align:top; 
    } 

    /* start state */ 
    .mfp-with-anim { 
    opacity: 0; 
    transition: all 0.2s; 

    transform: translateY(-100px); 
    } 

    &.mfp-bg { 
    opacity: 0; 
     transition: all 0.2s; 
    } 

    /* animate in */ 
    &.mfp-ready { 
    .mfp-with-anim { 
     opacity: 1; 
     transform: translateY(0); 
    } 
    &.mfp-bg { 
     opacity: 0.8; 
    } 
    } 

    /* animate out */ 
    &.mfp-removing { 

    .mfp-with-anim { 
     transform: translateY(-50px); 
     opacity: 0; 
    } 
    &.mfp-bg { 
     opacity: 0; 
    } 

    } 

} 


/* 

====== 3d unfold ====== 

*/ 
.mfp-3d-unfold { 


    .mfp-content { 
    perspective: 2000px; 
    } 

    /* start state */ 
    .mfp-with-anim { 
    opacity: 0; 
    transition: all 0.3s ease-in-out; 
    transform-style: preserve-3d; 
    transform: rotateY(-60deg); 
    } 


    &.mfp-bg { 
    opacity: 0; 
     transition: all 0.5s; 
    } 

    /* animate in */ 
    &.mfp-ready { 
    .mfp-with-anim { 
     opacity: 1; 
     transform: rotateY(0deg); 
    } 
    &.mfp-bg { 
     opacity: 0.8; 
    } 
    } 

    /* animate out */ 
    &.mfp-removing { 

    .mfp-with-anim { 
     transform: rotateY(60deg); 
     opacity: 0; 
    } 
    &.mfp-bg { 
     opacity: 0; 
    } 

    } 

} 




/* 

====== Zoom-out effect ====== 

*/ 
.mfp-zoom-out { 

    /* start state */ 
    .mfp-with-anim { 
    opacity: 0; 
    transition: all 0.3s ease-in-out; 
    transform: scale(1.3); 
    } 

    &.mfp-bg { 
    opacity: 0; 
     transition: all 0.3s ease-out; 
    } 

    /* animate in */ 
    &.mfp-ready { 
    .mfp-with-anim { 
     opacity: 1; 
     transform: scale(1); 
    } 
    &.mfp-bg { 
     opacity: 0.8; 
    } 
    } 

    /* animate out */ 
    &.mfp-removing { 

    .mfp-with-anim { 
     transform: scale(1.3); 
     opacity: 0; 
    } 
    &.mfp-bg { 
     opacity: 0; 
    } 

    } 

} 



/* 

====== "Hinge" close effect ====== 

*/ 

@keyframes hinge { 
    0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }  
    20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
    40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 
    80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 
    100% { transform: translateY(700px); opacity: 0; } 
} 

.hinge { 
    animation-duration: 1s; 
    animation-name: hinge; 
} 
.mfp-with-fade { 
    // before-open state 
    .mfp-content, 
    &.mfp-bg { 
    opacity: 0; 
    transition: opacity .5s ease-out; 
    } 
    // open state 
    &.mfp-ready { 
    .mfp-content { 
    opacity: 1; 
    } 
    &.mfp-bg { 
     opacity: 0.8; // background opacity 
    } 
    } 

    // closed state 
    &.mfp-removing { 
    &.mfp-bg { 
     opacity: 0; 
    } 
    } 
} 

Answer 1

wpadłem na ten sam problem i po walić głową na wszystkich twardych powierzchniach w moim biurze odkryłem, że muszę zmienić nazwy klas css, aby pasowały do ​​egzaminu znikającego pod warunkiem, że pod warunkiem here.

Tak na przykład MFP-zoom-out animacji:

.mfp-zoom-out .mfp-z-Anim powinny być .mfp-zoom-out.mfp-bg

.mfp-zoom-out.mfp-bg pozostaje taka sama

.mfp-zoom-out.mfp gotowe .mfp-z-anim powinny być .mfp-zoom-out.mfp gotowe .mfp-content

.mfp-zoom-out.mfp-ready.mfp-bg powinny być .mfp-zoom-out.mfp-BG .mfp gotowe

.mfp-zoom-out.mfp usuwania .mfp-z-Anim powinny być .mfp-zoom-out.mfp usuwania .mfp-content

.mfp -zoom-out.mfp-removal.mfp-bg powinien być .mfp-zoom-out.mfp-bg.mfp-usuwanie

Answer 2

Sprawdź, czy mam kod dla animacji Zmniejsz-powiększ dla pierwszego okna dialogowego i animacji Przenikanie ruchu do drugiego okna dialogowego.

Można uzyskać magnific-popup.css i magnific-popup.min.js pliki w folderze dist ... Pliki można pobrać z https://github.com/dimsemenov/Magnific-Popup

<html lang="en"> 
<head> 
    <title><!-- Insert your title here --></title> 




<link rel="stylesheet" href="magnific-popup.css"> 


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 


<script src="jquery.magnific-popup.min.js"></script> 



</head> 
<body> 

    <div class="example gc3"> 
    <h3>Dialog with CSS animation</h3> 

    <div class="html-code"> 
     <a class="popup-with-zoom-anim" href="#small-dialog" >Open with fade-zoom animation</a><br/> 
     <a class="popup-with-move-anim" href="#small-dialog" >Open with fade-slide animation</a> 

     <!-- dialog itself, mfp-hide class is required to make dialog hidden --> 
     <div id="small-dialog" class="zoom-anim-dialog mfp-hide"> 
     <h1>Dialog example</h1> 
     <p>This is dummy copy. It is not meant to be read. It has been placed here solely to demonstrate the look and feel of finished, typeset text. Only for show. He who searches for meaning here will be sorely disappointed.</p> 
     </div> 
    </div> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
     $('.popup-with-zoom-anim').magnificPopup({ 
      type: 'inline', 

      fixedContentPos: false, 
      fixedBgPos: true, 

      overflowY: 'auto', 

      closeBtnInside: true, 
      preloader: false, 

      midClick: true, 
      removalDelay: 300, 
      mainClass: 'my-mfp-zoom-in' 
     }); 

     $('.popup-with-move-anim').magnificPopup({ 
      type: 'inline', 

      fixedContentPos: false, 
      fixedBgPos: true, 

      overflowY: 'auto', 

      closeBtnInside: true, 
      preloader: false, 

      midClick: true, 
      removalDelay: 300, 
      mainClass: 'my-mfp-slide-bottom' 
     }); 
     }); 
    </script> 

    <style type="text/css"> 
     /* Styles for dialog window */ 
     #small-dialog { 
     background: white; 
     padding: 20px 30px; 
     text-align: left; 
     max-width: 400px; 
     margin: 40px auto; 
     position: relative; 
     } 


     /** 
     * Fade-zoom animation for first dialog 
     */ 

     /* start state */ 
     .my-mfp-zoom-in .zoom-anim-dialog { 
     opacity: 0; 

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



     -webkit-transform: scale(0.8); 
     -moz-transform: scale(0.8); 
     -ms-transform: scale(0.8); 
     -o-transform: scale(0.8); 
     transform: scale(0.8); 
     } 

     /* animate in */ 
     .my-mfp-zoom-in.mfp-ready .zoom-anim-dialog { 
     opacity: 1; 

     -webkit-transform: scale(1); 
     -moz-transform: scale(1); 
     -ms-transform: scale(1); 
     -o-transform: scale(1); 
     transform: scale(1); 
     } 

     /* animate out */ 
     .my-mfp-zoom-in.mfp-removing .zoom-anim-dialog { 
     -webkit-transform: scale(0.8); 
     -moz-transform: scale(0.8); 
     -ms-transform: scale(0.8); 
     -o-transform: scale(0.8); 
     transform: scale(0.8); 

     opacity: 0; 
     } 

     /* Dark overlay, start state */ 
     .my-mfp-zoom-in.mfp-bg { 
     opacity: 0.001; /* Chrome opacity transition bug */ 
     -webkit-transition: opacity 0.3s ease-out; 
     -moz-transition: opacity 0.3s ease-out; 
     -o-transition: opacity 0.3s ease-out; 
     transition: opacity 0.3s ease-out; 
     } 
     /* animate in */ 
     .my-mfp-zoom-in.mfp-ready.mfp-bg { 
     opacity: 0.8; 
     } 
     /* animate out */ 
     .my-mfp-zoom-in.mfp-removing.mfp-bg { 
     opacity: 0; 
     } 



     /** 
     * Fade-move animation for second dialog 
     */ 

     /* at start */ 
     .my-mfp-slide-bottom .zoom-anim-dialog { 
     opacity: 0; 
     -webkit-transition: all 0.2s ease-out; 
     -moz-transition: all 0.2s ease-out; 
     -o-transition: all 0.2s ease-out; 
     transition: all 0.2s ease-out; 

     -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg); 
     -moz-transform: translateY(-20px) perspective(600px) rotateX(10deg); 
     -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg); 
     -o-transform: translateY(-20px) perspective(600px) rotateX(10deg); 
     transform: translateY(-20px) perspective(600px) rotateX(10deg); 

     } 

     /* animate in */ 
     .my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog { 
     opacity: 1; 
     -webkit-transform: translateY(0) perspective(600px) rotateX(0); 
     -moz-transform: translateY(0) perspective(600px) rotateX(0); 
     -ms-transform: translateY(0) perspective(600px) rotateX(0); 
     -o-transform: translateY(0) perspective(600px) rotateX(0); 
     transform: translateY(0) perspective(600px) rotateX(0); 
     } 

     /* animate out */ 
     .my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog { 
     opacity: 0; 

     -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg); 
     -moz-transform: translateY(-10px) perspective(600px) rotateX(10deg); 
     -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg); 
     -o-transform: translateY(-10px) perspective(600px) rotateX(10deg); 
     transform: translateY(-10px) perspective(600px) rotateX(10deg); 
     } 

     /* Dark overlay, start state */ 
     .my-mfp-slide-bottom.mfp-bg { 
     opacity: 0.01; 

     -webkit-transition: opacity 0.3s ease-out; 
     -moz-transition: opacity 0.3s ease-out; 
     -o-transition: opacity 0.3s ease-out; 
     transition: opacity 0.3s ease-out; 
     } 
     /* animate in */ 
     .my-mfp-slide-bottom.mfp-ready.mfp-bg { 
     opacity: 0.8; 
     } 
     /* animate out */ 
     .my-mfp-slide-bottom.mfp-removing.mfp-bg { 
     opacity: 0; 
     } 
    </style> 
    </div> 



</body> 
</html> 

Answer 3

Można także świetny użytek z ożywionej. css (http://daneden.github.io/animate.css/).Po zainicjowaniu wyskakującego okienka upewnij się, że dodajesz klasę animate wraz z żądaną klasą animacji z biblioteki. Na przykład animate fadeIn.

Answer 4

W przypadku wszystkich zainteresowanych animacją .mfp-move-z-góry Poniżej znajduje się kod:

.mfp-move-from-top .mfp-content{ 
    vertical-align:bottom; 
} 

.mfp-move-from-top .mfp-with-anim{ 
    opacity: 0; 
    transition: all 0.2s; 
    transform: translateY(-100px); 
} 

.mfp-move-from-top.mfp-bg { 
    opacity: 0; 
    transition: all 0.2 
} 

.mfp-move-from-top.mfp-ready .mfp-with-anim { 

    opacity: 1; 
    transform: translateY(0); 
} 

.mfp-move-from-top.mfp-bg.mfp-ready { 
    opacity: 0.8; 

} 

.mfp-move-from-top.mfp-removing .mfp-with-anim { 
    transform: translateY(-50px); 
    opacity: 0; 
} 

.mfp-move-from-top.mfp-removing.mfp-bg { 
    opacity: 0; 
} 

Answer 5

miałem ten sam problem. Znaleziono rozwiązanie here: wystarczy zmienić

beforeOpen: function() { 
    this.st.mainClass = this.st.el.attr('data-effect'); 
} 
to this (adds a space and then the class, in case option is being used): 

do

beforeOpen: function() { 
    this.st.mainClass += ' ' + this.st.el.attr('data-effect'); 
}