html - 改变动画的方向

Question

我正在使用 wow.js 和 animate.js 在鼠标滚动时显示动画。

我想改变小设备上的动画方向，比如在大屏幕上它应该从右边开始动画，而在小设备上它应该从底部开始动画。

这是一个片段来展示我需要的东西。

new WOW().init();

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>
  <section class="wow fadeInRight" >Section 1</section>
  <section class="wow fadeInUp"  data-wow-delay="1s">Section 1 on mobile</section>

Answer 1

你可以简单地这样做:

new WOW().init();

.desktop {
  display: block;
}

.mobile {
  display: none;
}

@media all and (max-width:767px) {
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" />
<section class="wow fadeInRight desktop">Section 1</section>
<section class="wow fadeInUp mobile">Section 1 on mobile</section>