内置图库模式下的Magnific popup淡入淡出效果

Question

我正在使用内置画廊的大胆弹出窗口。但没有任何影响。我需要在打开/关闭弹出窗口时淡化效果。我怎么能实现，你能帮助我吗？

https://jsfiddle.net/gbp31r8n/3/

   [Here is fiddle link][1]      

Answer 1

你可以试试这个。

首先，您需要创建近距离和开放动画。

然后在弹出窗口打开时将动画添加到.white-popup-block，然后在弹出窗口关闭时将动画添加到.mfp-removing。

.white-popup-block {
  background: #ccc;
  padding: 20px;
  max-width: 300px;
  margin: 0 auto;

  animation: open 1s;
}

.mfp-removing{
  animation: close 1s;
}

@keyframes open {
    0%   {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes close {
    0%   {opacity: 1;}
    100% {opacity: 0;}
}

之后你需要使用removalDelay创建一个延迟并使其成为900，因为关键帧动画是1s，我设置延迟到900ms延迟应该小于关键帧动画时间。

$('.popup-with-content').magnificPopup({
        type: 'inline',
        preloader: false,
        gallery:{enabled:true},
        removalDelay: 900,
        callbacks: {
            beforeOpen: function() {
                this.st.mainClass = this.st.el.attr('data-effect');
            }
          },
    });

请看这个小提琴https://jsfiddle.net/gbp31r8n/26/

希望这可以帮助。