Non riesco a far funzionare le animazioni con i popup magnifici

Question

Ho avuto l'eccellente documentazione per questo ed è grandioso. http://dimsemenov.com/plugins/magnific-popup/documentation.html Ho il pop up di base che funziona bene.

Il mio problema è con le animazioni. Non riesco a farli funzionare. Mi scuso se ho perso qualcosa di molto semplice, ma ho speso troppo tempo su questo ora e spero che qualcuno possa segnalare il mio errore. Al momento sembra solo non svanire nulla.

Ho giocato con esso su codepen e posso ricreare il problema rimuovendo il CSS, quindi forse questo non sta attraversando correttamente, anche se so che è il collegamento come lo stile del pop-up non solo le animazioni.

Ecco il mio 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> 

mio JavaScript dalla stessa pagina:

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

mio 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

mi sono imbattuto in questo stesso problema e dopo sbattere la testa contro tutte le superfici dure del mio ufficio ho scoperto che ho bisogno di rinominare le classi CSS per abbinare l'esame di dissolvenza ha fornito here.

Così, per esempio l'animazione MFP-zoom-out:

.mfp-zoom-out .mfp-con-anim dovrebbe essere .mfp-zoom-out.mfp-bg

.mfp-zoom-out.mfp-bg rimane lo stesso

.mfp-zoom-out.mfp-ready .mfp-con-anim dovrebbe essere .mfp-zoom-out.mfp-ready .mfp-content

.mfp-zoom-out.mfp-ready.mfp-bg dovrebbe essere .mfp-zoom-out.mfp-bg .mfp-ready

.mfp-zoom-out.mfp rimozione .mfp-con-anim dovrebbe essere .mfp-zoom-out.mfp rimozione .mfp-content

.mfp -zoom-out.mfp-removal.mfp-bg deve essere .mfp-zoom-out.mfp-bg.mfp-remove

Answer 2

Controlla di avere il codice per l'animazione Fade-zoom per la prima finestra di dialogo e l'animazione Fade-move per la seconda finestra di dialogo.

È possibile ottenere file magnific-popup.min.js nella cartella dist magnific-popup.css e ... I file possono essere scaricati dal 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

Si può anche fare grande uso di animare. css (http://daneden.github.io/animate.css/).Una volta inizializzato il popup, assicurati di aggiungere la classe animate insieme alla classe di animazione desiderata dalla libreria. Ad esempio animate fadeIn.

Answer 4

Nel caso qualcuno interessato nell'animazione .mfp-move-da-top sotto è il codice:

.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

Ho avuto lo stesso problema. trovato la soluzione here: basta cambiare

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): 

in

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