Question

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

＆＃13;

<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>

＆＃13;

Answer 1

＆＃34; github.com/matthieua/WOW" animate.css;请参阅＆＃34; github.com/daneden/animate.css"的animate.css。

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

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

WOW的animate.css不是最新版本。

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

Answer 2

我把css更改为最新的animate.css但是它仍然没有用，我不知道为什么但如果我将css的“slideInUp”类重命名为另一个像slideUpIn，它对我有用！ / p>

希望它有所帮助！

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插件的Web动画：wow slideInUp不起作用

3 个答案: