一起使用 Animate.css 和 Waypoints – Safari 可以，Chrome 和 FF 不行答案

【问题标题】：Using Animate.css and Waypoints together – Safari works, Chrome & FF do not一起使用 Animate.css 和 Waypoints – Safari 可以，Chrome 和 FF 不行
【发布时间】：2018-03-19 19:00:21
【问题描述】：

我有一个站点框架，它使用来自Animate.css 的@keyframe 选项，并且我正在使用$(window).onScroll()（带有超时限制）在元素进入视口时向它们添加一个类。

网上有很多关于这种组合的教程，但由于我网站上的作者可以在 CMS 中选择他们想要的动画，我需要保持动画类内联，然后在元素出现时触发动画。

所以示例元素可能如下所示：

<div class="animated fadeInUp animated__initial"> ... </div>

然后使用$(window).onScroll()，我正在使用这个（没有节流只是为了使代码更易于阅读）：

var cur_pos = $(this).scrollTop();
var animated = $('.animated.animated__initial');
animated.each(function() {
  var top = $(this).offset().top;
  var window_h = $(window).height();
  var top_offset = top - (window_h * .75);

  if (cur_pos >= top_offset) {
    $(this).addClass('animated__active');
  }
});

也就是说，它在 Safari (11) 中运行良好。一旦元素进入视野，动画就会按预期工作。然而，对于 Firefox (58) 和 Chrome (65)，它们只是“卡入”到位，从不可见变为可见，没有动画过渡。

这些是我的 SASS 规则：

html.js {

  .animated {
    will-change: transform;
  }

  .animated.animated__initial {
    visibility: hidden;
  }

  .animated.animated__active {
    animation-duration: 750ms;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    visibility: visible;
  }
}

尽管我不需要它们，但 -webkit 和 -moz 前缀都存在于动画名称和关键帧上（我正在使用 Autoprefixer）。

我很困惑为什么 Safari 运行良好，而 Chrome/FF 却不行。它通常是相反的。

【问题讨论】：

标签： css safari css-animations jquery-waypoints animate.css

【解决方案1】：

对于遇到此问题的其他人来说，解决方法很简单，但我并不容易遇到。这是反复试验。

基本上，Chrome 和 Firefox 会在页面加载时为元素设置动画，就好像 animated__initial 与 animated__active 类什么都不做一样。事实证明，这是因为我也应该使用 animation-play-state 属性。

我还使用了visibility 属性。我认为 Safari 必须在隐藏对象上将animation-play-state 设置为默认的paused，而其他的则不需要。

这个更新的 SASS 现在可以在所有三个浏览器中使用，IE 11 也是如此。

html.js {

  .animated {
    will-change: transform;
  }

  .animated.animated__initial {
    animation-play-state: paused;
    opacity: 0;
  }

  .animated.animated__active {
    animation-duration: 750ms;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-play-state: running;
  }
}

【讨论】：