带有 Jquery 插件的 Web 动画：哇 slideInUp 不起作用答案

【问题标题】：Web animations with Jquery plugins : wow slideInUp doesn't work带有 Jquery 插件的 Web 动画：哇 slideInUp 不起作用
【发布时间】：2021-03-18 23:54:09
【问题描述】：

我正在尝试使用 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>

【问题讨论】：

检查链接部分是否正确。我不确定，但我认为这个错误是因为您没有正确完成引用。检查并查看
哦，好点！但是你能准确地说一下我可能错过的参考吗？因为对我来说一切都很好..
你能显示你的文件夹结构吗？这可能会有所帮助。
为什么我被否决了？..

标签： jquery html twitter-bootstrap wow.js

【解决方案1】：

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

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

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

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

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

【讨论】：

是的，bounceIn Up 效果很好！但不是我必须做的真正渲染.. 我需要做一个小滑动，谨慎，大约 20 像素
我建议您使用https://github.com/daneden/animate.css，这将很适合您的要求。答案已更新。
但是，如果我是对的，我确信 Wow.js 已经使用 animate.css 所以..这就是我已经在做的事情
“github.com/matthieua/WOW”的animate.css指的是“github.com/daneden/animate.css”的animate.css。在WOW中，我在animate.css中没有找到slideUp的定义。但是，我可以在daneden/animate.css 中找到slideUp 的定义。所以，我猜WOW的animate.css不是最新版本。建议你比较一下animate.css两者的区别。
感谢您的可靠性和准确性，我将检查该问题。你认为我可以用更新替换旧的 animate.css 以使其正常工作吗？

【解决方案2】：

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

希望对你有帮助！

【讨论】：

【解决方案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 放进去

【讨论】：