如何延迟 CSS 动画，直到我滚动到 React 中的元素？

Question

我已经构建了一个与此类似的动画，现在我想确保它仅在用户滚动到某个位置时才会播放，以便动画内容实际上是可见的。我如何在 React 应用程序中做到这一点？
我已尝试阅读该问题，但大多数解决方案都指向 jQuery 或 Animate.css 或 waypoint js。

---

1. 有什么方法可以在不使用这些的情况下做到这一点？
2. React 和 jQuery 如何协同工作而不引起冲突？ （我问是因为我也在使用 react-bootstrap 并且他们明确声明他们已经从头开始构建它以避免将 jQuery 与 React 一起使用）我什至应该在哪里编写 jQuery 代码？

body{
  font-family: Helvetica, Arial, sans-serif;
}
.container{
  width: 50%;
  margin: 0 auto;
}
@keyframes load{
  from {
    width: 0%
  }
}
@-webkit-keyframes load{
  from {
    width: 0%
  }
}
@-moz-keyframes load{
  from {
    width: 0%
  }
}
@-o-keyframes load{
  from {
    width: 0%
  }
}

.bar{
  background-color: #EEE;
  padding: 2px;
  border-radius: 15px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #FFF;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.bar::before{
  content:  attr(data-skill);
  background-color: #f3b0ff;
  display: inline-block;
  padding: 5px 0 5px 10px;
  border-radius: inherit;
  animation: load 2s 0s;
  -webkit-animation: load 2s 0s;
  -moz-animation: load 2s 0s;
  -o-animation: load 2s 0s;
}

.bar.front::before{
  background-color: #ffcc33;
}
.bar.back::before{
  background-color: #a6cfe3;
}

.bar.learning::before{
  width: calc(20% - 10px);
}
.bar.basic::before{
  width: calc(40% - 10px);
}
.bar.intermediate::before{
  width: calc(60% - 10px);
}
.bar.advanced::before{
  width: calc(80% - 10px);
}
.bar.expert::before{
  width: calc(100% - 10px);
}

  <div class="container">
    <h1>Skill Set</h1>
    <div class="bar learning" data-skill="TDD"></div>
    <div class="bar back basic" data-skill="Python"></div>
    <div class="bar back intermediate" data-skill="C#"></div>
    <div class="bar front advanced" data-skill="CSS3"></div>
    <div class="bar front expert" data-skill="HTML5"></div>

  </div>

Answer 1

1. 您始终可以使用react-is-visible 之类的库。这将跟踪组件的可见性。然后，您可以在可见性变量上设置一个useEffect，一旦它变得可见，它就可以将一个类添加到您要动画的组件中。

扩展包中的文档以适合此答案

import React, { useRef } from "react"
import { useIsVisible } from "react-is-visible"

const SomeComponent = () => {
  const nodeRef = useRef();
  const isVisible = useIsVisible(nodeRef);

  return (
    <div ref={nodeRef} className={`bar${isVisible ? ' animate' : ''}`}>
      {..content of div}
    </div>
  );
}

然后您还需要编辑 CSS

.bar{
  background-color: #EEE;
  padding: 2px;
  border-radius: 15px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #FFF;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
}
.bar::before{
  content:  attr(data-skill);
  background-color: #f3b0ff;
  display: inline-block;
  padding: 5px 0 5px 10px;
  border-radius: inherit;
}
.bar.animate::before{
  animation: load 2s 0s;
  -webkit-animation: load 2s 0s;
  -moz-animation: load 2s 0s;
  -o-animation: load 2s 0s;
}

.bar.front::before{
  background-color: #ffcc33;

1. 为什么要让 jQuery 和 React 一起工作？ React 应该可以实现你想用 jQuery 实现的！

Answer 2

您可以使用原生 JavaScript 做到这一点。使用Intersection Observer API 检测元素何时进入视口。如果有，请将一个类添加到您想要动画的元素。

请看下面的例子：

const observerCallback = (entries, observer) => {
  for (const { target, isIntersecting } of entries) {
    if (isIntersecting) {
      target.classList.add('animate');
      observer.unobserve(target);
    }
  }
};

const observer = new IntersectionObserver(observerCallback, {
  root: null,
  rootMargin: '0px',
  threshold: [0]
});

const trigger = document.querySelector('.js-animation-trigger');

observer.observe(trigger);

body {
  font-family: Helvetica, Arial, sans-serif;
}

.container {
  width: 50%;
  margin: 1000px auto 0;
}

@keyframes load {
  from {
    width: 0%
  }
}

.bar {
  background-color: #EEE;
  padding: 2px;
  border-radius: 15px;
  margin-bottom: 5px;
  font-size: 14px;
  color: #FFF;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.bar::before {
  content: attr(data-skill);
  background-color: #f3b0ff;
  display: inline-block;
  padding: 5px 0 5px 10px;
  border-radius: inherit;
  animation: load 2s 0s paused;
}

/* Start playing */
.animate .bar::before {
  animation-play-state: running;
}

.bar.front::before {
  background-color: #ffcc33;
}

.bar.back::before {
  background-color: #a6cfe3;
}

.bar.learning::before {
  width: calc(20% - 10px);
}

.bar.basic::before {
  width: calc(40% - 10px);
}

.bar.intermediate::before {
  width: calc(60% - 10px);
}

.bar.advanced::before {
  width: calc(80% - 10px);
}

.bar.expert::before {
  width: calc(100% - 10px);
}

<div class="container">
  <div class="js-animation-trigger">
    <h1>Skill Set</h1>
    <div class="bar learning" data-skill="TDD"></div>
    <div class="bar back basic" data-skill="Python"></div>
    <div class="bar back intermediate" data-skill="C#"></div>
    <div class="bar front advanced" data-skill="CSS3"></div>
    <div class="bar front expert" data-skill="HTML5"></div>
  </div>
</div>