带有 Jquery 插件的网络动画：哇 slideInUp 不起作用

Question

我正在尝试使用 wow.js 插件为我的网页制作动画，但不幸的是，我想使用的唯一动画似乎在我的情况下不起作用。当我尝试 slideInDown、slideInLeft 和其他人时，效果很好。我使用 Bootstrap 进行响应式网页设计。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
<meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no"/>
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>>
    <link rel="stylesheet" href="bootstrap/css/animate.css">
    <link rel="stylesheet" href="bootstrap/css/site.css">
  </head>
  <body>
<div class="organic container">
      <div class="row">
        <div class="col-xs-7 col-xs-offset-4 col-sm-7 col-sm-offset-4 col-md-7 col-md-offset-4 col-lg-7 col-lg-offset-4"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/></div>
        <h2 class="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2 wow slideInUp" data-wow-offset="10" data-wow-duration="5s"> ORGANIC</h2>
        <p class="col-xs-5 col-xs-offset-2 col-sm-5 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 wow slideInUp" data-wow-offset="10" data-wow-duration="5s" data-wow-iteration="20"> Nos infusions en tige  offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.</p>
      </div>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="bootstrap/js/wow.min.js"></script>
    <script>
      wow = new WOW(
        {
          animateClass: 'animated',
          offset:       100,
          callback:     function(box) {
            console.log("WOW: animating <" + box.tagName.toLowerCase() + ">")
          }
        }
      );
      wow.init();
    </script>
  </body>
</html>

Answer 1

"github.com/matthieua/WOW"的animate.css是指"github.com/daneden/animate.css"的animate.css。

在WOW中，我在animate.css中找不到slideUp的定义。

但是，我可以在daneden/animate.css中找到slideUp的定义。

魔兽animate.css不是最新版本

您可以用更新替换旧的 animate.css 以使其正常运行。

Answer 2

我将 css 更改为最新的 animate.css 但仍然没有用，我不知道为什么，但是如果我将 "slideInUp" class 重命名为css 到另一个像 slideUpIn，它对我有用！

希望对您有所帮助！

Answer 3

我不知道为什么它不存在，但它是这样的：

@keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
      }
    
      100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
}
    
.slideInUp {
      -webkit-animation-name: slideInUp;
      animation-name: slideInUp;
}

你可以输入你的style.css

带有 Jquery 插件的网络动画：哇 slideInUp 不起作用

Web animations with Jquery plugins : wow slideInUp doesn't work

html

jquery

twitter-bootstrap

wow.js