javascript - 滚动事件上的@keyframe动画

Question

我正在使用可变字体，并希望在滚动时使用@keyframes为其设置动画，然后在用户停止滚动时不设置动画。

我可以使动画正常工作，但是当您停止滚动时，动画会停止并快速返回到起始位置，这使其看起来非常跳跃。

为了使其更加顺利完成，我想知道是否有一种方法，当用户停止滚动时，可以获取动画的当前位置，然后完成该动画循环，然后停止，而不是立即回到起始位置？

由于我无法使用 @font-face 将可变字体加载到 jsfiddle 中，因此我将其放在这里: http://slug.directory/GX/

这是 js...

    $(document).ready(function() {

    var scrollTimerId;

    $(window).scroll(function() {
        if (!scrollTimerId)
            $('body').addClass('scrolling');

        clearTimeout(scrollTimerId);
        scrollTimerId = setTimeout(function(){
            $('body').removeClass('scrolling');
            scrollTimerId = undefined;
        },150);
    });
});

和 CSS...

@keyframes changewidth {
  0% {
    font-variation-settings: 'wght' 1;
  }

  100% {
    font-variation-settings: 'wght' 100;
  }
}

.scrolling {
  animation-duration: 0.5s;
  animation-name: changewidth;
  animation-iteration-count: infinite;
  animation-direction: alternate;
 animation-fill-mode: forwards;
}

body {
    font-family: "AG GX", Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 2vw;
    line-height: 2vw;
    font-variation-settings: 'wght' 1;
    height: 300vh;
}

div {
  position: fixed;
}

提前致谢!

Answer 1

您面临的情况只是如何从动画中的任意点过渡到静态位置。
不幸的是没有 CSS 定义的方式，所以我们必须依靠 javascript 来处理这个问题。

基本思想是手动触发该转换。 getCompulatedStyle 可以为您提供动画当前的值，因此我们可以将其设置为元素的内联样式，然后在强制回流以触发到原始位置的转换后立即将其删除。

不幸的是，Safari 的行为很奇怪，我们也必须切换转换属性，使得此操作强制 3 次同步回流...

这是一个使用移动框的示例，因为它更容易设置为片段:

const box = document.getElementById( 'box' );
onclick = e => {
  box.style.setProperty( 'transform', getComputedStyle( box ).transform );
  // set the inline style to the current value
  box.classList.toggle( 'anim' ); // disable the animation
  
  box.offsetWidth; // trigger a first reflow just for Safari
  box.classList.toggle( 'transition' ); // toggle the transition
  box.offsetWidth; // trigger an other reflow so the browser knows where we are
  box.style.removeProperty( 'transform' ); // come back to initial position
};

#box {
  width: 50px; 
  height: 50px;
  background: lime;
}
.anim {
  animation: move 2.5s infinite;
}
.transition {
  transition: transform 2s;
}
@keyframes move {
  from { transform: translate(0, 0) rotate(0deg); } /* Safari needs a 'from' */
  to { transform: translate(100vw, 0) rotate(360deg); }
}

<pre>click to toggle the animation on/off</pre>
<div id="box" class="transition"></div>

使用您的代码将给出:

$(window).scroll(function() {
  if (!scrollTimerId)
    $('body').addClass('scrolling')
      .removeClass('transition-font-variation');

  clearTimeout(scrollTimerId);
  scrollTimerId = setTimeout(function() {
    const val = getComputedStyle(document.body).getPropertyValue('font-variation-settings');
    document.body.style.setProperty( 'font-variation-settings', val );
    $('body').removeClass('scrolling');
    document.body.offsetWidth; // force reflow
    $('body').addClass('transition-font-variation');
    document.body.offsetWidth; // force reflow
    document.body.style.removeProperty( 'font-variation-settings' );
    scrollTimerId = undefined;
  }, 150);
});

body {
    font-family: "AG GX", Helvetica, sans-serif;
    font-weight: normal;
    font-style: normal;
    font-size: 2vw;
    line-height: 2vw;
    font-variation-settings: 'wght' 1;
    height: 300vh;
}
body.transition-font-variation {
  transition: font-variation-settings 2s;
}

(如果您想从 OP 的网站尝试，请在应用这些更改之前在 js 控制台中输入 $(window).off('scroll'))。