我已经完成了这方面的优秀文档，这很棒。 http://dimsemenov.com/plugins/magnific-popup/documentation.html 我的基本弹出工作正常。
我的问题在于动画。我只是无法让他们工作。抱歉，如果我错过了一些非常基本的东西，但我现在已经花了很长时间，希望有人可以指出我的错误。它目前似乎没有任何褪色。
我在codepen上玩过它，并且可以通过删除CSS来重新创建问题，所以这可能没有正确通过，虽然我知道它是链接，因为它的样式弹出而不是动画。
这是我的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>
我的JavaScript来自同一页面：
<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>
我的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;
}
}
}
答案 0 :(得分：11)
我遇到了同样的问题，在我的头撞到我办公室的所有硬表面之后，我发现我需要重命名css类以匹配他提供的淡出示例here。
例如mfp-zoom-out动画：
.mfp-zoom-out .mfp-with-anim 应该 .mfp-zoom-out.mfp-bg
.mfp-zoom-out.mfp-bg 保持不变
.mfp-zoom-out.mfp-ready .mfp-with-anim 应该 .mfp-zoom-out.mfp-ready .mfp-content < / p>
.mfp-zoom-out.mfp-ready.mfp-bg 应该 .mfp-zoom-out.mfp-bg.mfp-ready
.mfp-zoom-out.mfp-removal .mfp-with-anim 应该 .mfp-zoom-out.mfp-removal .mfp-content < / p>
.mfp-zoom-out.mfp-removing.mfp-bg 应为 .mfp-zoom-out.mfp-bg.mfp-removal
答案 1 :(得分：1)
您还可以充分利用animate.css（http://daneden.github.io/animate.css/）。初始化弹出窗口后，请确保从库中添加animate类以及所需的动画类。例如animate fadeIn。
答案 2 :(得分：0)
检查我有第一个对话框的淡化变焦动画代码和第二个对话框的淡化动画动画。
您可以在dist文件夹中获取magnific-popup.css和magnific-popup.min.js文件...文件可以从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>
答案 3 :(得分：0)
如果对下面的.mfp-move-from-top动画感兴趣的人是代码：
.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;
}
答案 4 :(得分：0)
我遇到了同样的问题。找到了解决方案here： 只是改变
malloc()到
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):