如何让Magnific popup与animate.css一起使用？

I have a popup using magnific popup plugin (see http://dimsemenov.com/plugins/magnific-popup/documentation.html ). The popup works fine but when I add animate.css(see https://github.com/daneden/animate.css ) like I've seen in some examples that the 2 are compatible, it doesn;t work for me. Here is my code:

我有一个使用magnific popup插件的弹出窗口（请参阅http://dimsemenov.com/plugins/magnific-popup/documentation.html）。弹出窗口工作正常但是当我添加animate.css（请参阅https://github.com/daneden/animate.css）时，就像我在一些示例中看到的那样2是兼容的，它对我不起作用。这是我的代码：

       <form class="dnt-tool" name="dnt" id="dnt">
           <div class="dnt-overlay">
             <input type="radio" name="gender" id="male"><label for="male">Male</label>
             <input type="radio" name="gender" id="female"><label for="female">Female</label>
             <input type="radio" name="gender" id="all" checked><label for="all">All</label>
             <select>
               <option>Select a Category</option>
               <option>Catgeory 1</option>
               <option>Catgeory 2</option>
               <option>Category 3</option>
             </select>
           </div><!-- end of dnt-overlay -->
           <div class="dnt-btn">
              <button type="submit" id="submit">Show Names</button>
           </div><!-- end of dnt btn -->
         </form><!-- end of dnt-tool -->
       </div><!-- end of dnt-container-mobile -->
       <div class="white-popup mfp-hide male-dog" id="male-modal">
         <div class="popup-logo">
           <a class="logo teal"></a>
         </div><!-- end of logo -->
          <h1>Most Popular Male <br> Dog Names</h1>
          <img src="/img/dnt/male-puppy.png" alt="Male puppy">
          <div class="results-list">
            <ul>
              <li>Abby</li>
              <li>Apollo</li>
              <li>Bailey</li>
              <li>Bandit</li>
              <li>Baxter</li>
              <li>Bear</li>
              <li>Beau</li>
            </ul>
            <ul>
              <li>Blue</li>
              <li>Bo</li>
              <li>Beau</li>
              <li>Benji</li>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
            </ul>
            <ul>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
              <li>Benji</li>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
            </ul>
          </div><!-- end of results list -->
          <div class="more-btn">
              <button><a href="" class="">Tap to See More Names</a></button>
           </div><!-- end of dnt btn -->
       </div><!-- end of male popup -->
       <div class="white-popup mfp-hide female-dog" id="female-modal">
         <div class="popup-logo">
           <a class="logo teal"></a>
         </div><!-- end of logo -->
          <h1>Most Popular Female <br> Dog Names</h1>
          <img src="/img/dnt/femail-puppy.png" alt="Female puppy">
          <div class="results-list">
            <ul>
              <li>Abby</li>
              <li>Apollo</li>
              <li>Bailey</li>
              <li>Bandit</li>
              <li>Baxter</li>
              <li>Bear</li>
              <li>Beau</li>
            </ul>
            <ul>
              <li>Blue</li>
              <li>Bo</li>
              <li>Beau</li>
              <li>Benji</li>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
            </ul>
            <ul>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
              <li>Benji</li>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
            </ul>
          </div><!-- end of results list -->
          <div class="more-btn">
              <button><a href="" class="">Tap to See More Names</a></button>
           </div><!-- end of dnt btn -->
       </div><!-- end of female popup -->
      <div class="white-popup mfp-hide all-genders" id="all-modal">
         <div class="popup-logo">
           <a class="logo teal"></a>
         </div><!-- end of logo -->
          <h1>Most Popular Dog Names</h1>
          <img src="/img/dnt/gender-all.png">
          <div class="results-list">
            <ul>
              <li>Abby</li>
              <li>Apollo</li>
              <li>Bailey</li>
              <li>Bandit</li>
              <li>Baxter</li>
              <li>Bear</li>
              <li>Beau</li>
            </ul>
            <ul>
              <li>Blue</li>
              <li>Bo</li>
              <li>Beau</li>
              <li>Benji</li>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
            </ul>
            <ul>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
              <li>Benji</li>
              <li>Benny</li>
              <li>Bentley</li>
              <li>Blue</li>
            </ul>
          </div><!-- end of results list -->
          <div class="more-btn">
              <button><a href="" class="">Tap to See More Names</a></button>
           </div><!-- end of dnt btn -->
       </div><!-- end of results popup -->


      <script>
           $(document).ready(function() {
                $('#dnt').submit(function(e){
                      e.preventDefault(); // We don't need to send the form, because it all local
                       if($('#male').is(':checked')) { // Check if male is checked
                             $.magnificPopup.open({ // open pop up for male
                                  items: {
                                     src: '#male-modal',
                                     type: 'inline'
                                  }//items
                             });///popup open
                        } else if($('#female').is(':checked')) { // Check if female is checked 
                               $.magnificPopup.open({ // open pop up for female
                                  items: {
                                     src: '#female-modal',
                                     type: 'inline'
                                  }
                              });///popup open
                        } else if($('#all').is(':checked')) { // Check if all is checked
                              $.magnificPopup.open({
                                   items: {
                                      src: '#all-modal',
                                      type: 'inline'
                                   }
                              });
                        }
                        $('.white-popup').addClass('animated slideInRight');

              });///submit function 


      });//JQuery

What am I missing??

我错过了什么？

1 个解决方案

#1

You can simply add the animate.css class to the mainClass prop of magnificPopup.

您只需将animate.css类添加到magnificPopup的mainClass prop即可。

Magnific Popup - Animation

Magnific Popup - 动画

-- UPDATE --
Added an example with the option type set to inline.

- 更新 - 添加了一个选项类型设置为内联的示例。

Here you go.

干得好。

$('#image-button').magnificPopup({
    items: {
      src: 'http://placehold.it/300'
    },
    type: 'image',
  
    // add your animate.css class here
  
    mainClass: 'animated bounceIn'
});

$('#inline-button').magnificPopup({
    items: {
      src: '#inline-popup'
    },
    type: 'inline',
  
    // add your animate.css class here
  
    mainClass: 'animated flipInY'
});

.white-popup {
  position: relative;
  background: #FFF;
  padding: 20px;
  width: auto;
  max-width: 500px;
  margin: 20px auto;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

<button id="image-button">Image Example</button>

<button id="inline-button">Inline Example</button>

<div id="inline-popup" class="white-popup mfp-hide">
  Popup content
</div>

#1