内联画廊模式下的宏伟弹出式淡入淡出效果答案

【问题标题】：Magnific popup fade effect on inline gallery mode内联画廊模式下的宏伟弹出式淡入淡出效果
【发布时间】：2018-03-04 04:20:27
【问题描述】：

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

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

   [Here is fiddle link][1]

【问题讨论】：

你的问题不清楚。提供更多信息，您究竟想做什么。

标签： javascript jquery html css magnific-popup

【解决方案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/

希望这会有所帮助。

【讨论】：