改变动画的方向答案

【问题标题】：Change the direction of animation改变动画的方向
【发布时间】：2023-08-21 13:49:01
【问题描述】：

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

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

这是一个显示我需要的 sn-p。

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>

【问题讨论】：

标签： html css animate.css wow.js

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

【讨论】：

【解决方案2】：

我认为您不必为此使用两个内容，只需使用一个元素并为移动设备更改动画类。您可以减少内容。

我只是添加了一个媒体查询来更改动画类 anime.min.css

您可以更改媒体查询值（767px）

new WOW().init();

@media only screen and (max-width: 767px) {
  .anim-mob-up.fadeInRight {
    -webkit-animation-name: fadeInLeft !important;
    animation-name: fadeInLeft !important;	
  }
}

<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 anim-mob-up">Section 1 Both Desk & Mobile</section>

【讨论】：

【解决方案3】：

从您的 html 中删除类 fadeInRight。
使用 JS 检测屏幕宽度。
如果小于等于1024，则将fadeInUp添加到元素，否则将fadeInRight添加到元素。

  const wow = document.querySelectorAll('.wow')
  const dir = window.innerWidth <= 1024 ? 'fadeInUp' : 'fadeInRight'
  Array.prototype.forEach.call(wow, el => el.classList.add(dir))

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" >Section 1</section>
  <section class="wow"  data-wow-delay="1s">Section 1 on mobile</section>

【讨论】：