Question

我有一个利用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没有。它通常是相反的方式。

Answer 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;
  }
}

一起使用Animate.css和Waypoints - Safari可以使用，Chrome和＆amp; FF没有

1 个答案: