Question

我正在使用带有wow.js的animate.css。

第三个，数据延迟超过一秒，不会fadeInLeft。它通常会淡出（而不是从左侧）。

之前有人遇到过这个问题吗？我该如何解决？

-

这是我的看法。我在页面上有三个列表项。

<li>
  <span class="fadeInLeft wow" data-wow-delay="300ms">Text1</span>
</li>
<li>
  <span class="fadeInLeft wow" data-wow-delay="800ms">Text2</span>
</li>
<li>
  <span class="fadeInLeft wow" data-wow-delay="1200ms">Text2</span>
</li>

Answer 1

我知道这个帖子有点老了，但我想发布我对此的了解：

尝试使用分组类。

<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.3s"><li>Text1</li></section>
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="0.8s"><li>Text2</li></section>
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1.2s"><li>Text3</li></section>

Answer 2

我也有同样的问题。我找到了一个解决方法，即添加这些内联样式：

style =“ - webkit-animation-duration：3s; -moz-animation-duration：3s; animation-duration：3s;”

Answer 3

Wow.js api也使用动画的秒数单位。

例如，data-wow-delay =＆＃34; 2s＆＃34;会工作得很好。我不确定＆＃34; 1.2。＆＃34;

尝试一下，让我知道这是否适合你。

Answer 4

确保您的脚本是正确的，并且您正确地为最小版本键入“wow.js”或“wow.min.js”。如果没有，你将有动画，但没有wow.js延迟或滚动。

    <script src='js/wow.min.js'></script>

    <script>
        new WOW().init();
    </script>

Answer 5

我是这样做的：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>


<li><span class="wow animate__animated animate__fadeLeft" data-wow-delay="0.3s">Text1</span></li>
  <li><span class="wow animate__animated animate__fadeLeft" data-wow-delay="0.8s">Text2</span></li>
  <li><span class="wow animate__animated animate__fadeLeft" data-wow-delay="1.2s">Text2</span></li>er code here

Wow.js不会加载延迟超过1秒的动画。为什么？

5 个答案: