javascript - 内联画廊模式的华丽弹出淡入淡出效果

Question

我正在为内嵌画廊使用 magnific popup。但是没有任何效果。我需要在打开/关闭弹出窗口时淡入淡出效果。我怎样才能实现，你能帮我吗？

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');
            }
          },
    });

请看这个 fiddle https://jsfiddle.net/gbp31r8n/26/

希望这对您有所帮助。