html - CSS 动画在 wow js 中无法正常工作

Question

我已经为我的元素集成了 wow.js，但我遇到了动画问题。

仅当我将 animate.css 中的 css 类作为嵌入式样式表粘贴到我的页面时，我用来设置 div 动画的动画类才有效，并且即使我在数据中延迟，div 也会显示-哇- delay="5s"动画在 5 秒后正常工作。如果有人知道为什么会这样，请帮助我。

这是我的代码..

HTML:

  <div class="cssAnimation hidediv">
    <div class="dial1 wow slideInLeft " data-wow-duration="2s" data-wow-delay="5s">
        Anmation goes here 1
    </div>
</div>

CSS:

  <style type="text/css">

.dial1{
    width:200px;
    height: 100px;
    display: block;
    position: absolute;
    background: #000;
    color:#fff;
    padding: 10px;
    right: 0;
    z-index: 9999;
}

.dial2{
    width:200px;
    height: 100px;
    display: block;
    position: absolute;
    background: #000;
    color:#fff;
    padding: 10px;
    right: 210px;
}


.hidediv{
 -webkit-animation: hide 2s forwards;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-delay: 5s;
 animation: hide 2s forwards;
 animation-iteration-count: 1;
 animation-delay:  5s;
}

@-webkit-keyframes hide {
  0% {
     opacity: 1;
   }
  100% {
     opacity: 0;
     visibility:hidden;
     display: none;
   }
}

@keyframes hide {
  0% {
     opacity: 1;
  }
  100% {
     opacity: 0;
      visibility:hidden;
     display: none;
 }
 }

   .cssAnimation{
      width:600px;
      height: 300px;
     position: absolute;
   /* display: none; */
    z-index: 9999;
   }

@-webkit-keyframes slideInLeft {
       0% {
          opacity: 0;
          -webkit-transform: translateX(-2000px);
           transform: translateX(-2000px);
          }

      100% {
         -webkit-transform: translateX(0);
          transform: translateX(0);
       }
      }

    @keyframes slideInLeft {
        0% {
       opacity: 0;
      -webkit-transform: translateX(-2000px);
      -ms-transform: translateX(-2000px);
       transform: translateX(-2000px);
      }

       100% {
     -webkit-transform: translateX(0);
     -ms-transform: translateX(0);
      transform: translateX(0);
     }
    }

    .slideInLeft {
       -webkit-animation-name: slideInLeft;
        animation-name: slideInLeft;
    }

  </style>

Answer 1

您的 css 需要包含来自 animate.css 的 .animated 类，因为当元素处于 View 中时，Wow.js 将添加该类(除非您指定另一个选择器)，从而触发您的动画。