Reactjs 盖茨比JS-盖茨比插件滚动显示未激活

我目前正在测试插件- 我已将其添加到我的

gatsby config.js

中，如下所示：

plugins: [
        ...

        {
            resolve: `gatsby-plugin-scroll-reveal`,
            options: {
                threshold: 0.1, // Percentage of an element's area that needs to be visible to launch animation
                once: true, // Defines if animation needs to be launched once
                disable: false, // Flag for disabling animations

                // Advanced Options
                selector: "[data-sal]", // Selector of the elements to be animated
                animateClassName: "sal-animate", // Class name which triggers animation
                disabledClassName: "sal-disabled", // Class name which defines the disabled state
                rootMargin: "0% 50%", // Corresponds to root's bounding box margin
                enterEventName: "sal:in", // Enter event name
                exitEventName: "sal:out", // Exit event name
            },
        }
       ...
    ],

然后在我的

index.js

（主页）中，我有：

}

---

我是否错过了在页面上激活它的步骤？

老实说，放弃插件。你寻找一个简单的解决方案并没有错，但是对于你正在做的事情，没有任何盖茨比特定的东西，这个插件将你与之联系在一起，它是以不引人注目的JavaScript风格构建的（与它得到的反应差不多相反）

面向反应的解决方案将为您提供更好的服务，其中有很多。我最喜欢的方法是使用包装器（）在每个组件的基础上检测这一点，并设置相关的样式

将

react intersection observer

添加到依赖项中，然后可以执行以下操作：

import { useInView } from "react-intersection-observer"

const AutoPlayingVideo = ({ threshold = 0.15, ...playerProps }) => {
  const [ref, inView] = useInView({ threshold })

  useEffect(() => {
    if (inView) {
      ref.current?.play()
    } else {
      ref.current?.pause()
    }
  }, [ref, inView])

  return (
    <video
      style={{
        transition: "opacity 300ms, transform 300ms",
        opacity: inView ? 1 : 0,
        transform: `translateY(${inView ? 0 : 100}px)`,
      }}
      ref={ref}
      autoPlay
      playsInline
      muted
      loop
      {...playerProps}
    />
  )
}

从“react intersection observer”导入{useInView}
const AutoPlayingVideo=（{threshold=0.15，…playerProps}）=>{
常量[ref，inView]=useInView（{threshold}）
useffect（（）=>{
如果（查看）{
参考当前？.play（）
}否则{
参考当前？暂停（）
}
}，[ref，inView]）
返回(
)
}

在更少的代码中，您可以得到一个可重用的视频组件，带有一个动画条目，在视图中自动播放，在视图外暂停！像这样使用它：

<AutoPlayingVideo
  width="100%"
  height="661"
  preload="auto"
  type="video/webm"
>
  <source src={HomeHeroVideo} media={"(min-width: 768px)"} />
</video>

此外，如果您发现自己经常使用此功能，则很容易将常见行为提取到自己的组件中，以便重用：

import { useInView } from "react-intersection-observer"

const AnimateIn = ({ threshold = 0.15, triggerOnce = false, distance = 100, ...remainingProps }) => {
  const [ref, inView] = useInView({ threshold, triggerOnce })

  return (
    <div
      style={{
        // adjust these as desired
        transition: "opacity 300ms, transform 300ms",
        opacity: inView ? 1 : 0,
        transform: `translateY(${inView ? 0 : distance}px)`,
      }}
      {...remainingProps}
    />
  )
}

// In use:
<AnimateIn distance={30} triggerOnce={true}>
  <h1>Hi Mom!</h1>
</AnimateIn>

从“react intersection observer”导入{useInView}
常量AnimateIn=（{threshold=0.15，triggerOnce=false，distance=100，…remainingProps}）=>{
const[ref，inView]=useInView（{threshold，triggerOnce}）
返回(
)
}
//使用中：
嗨，妈妈！

老实说，放弃插件吧。你寻找一个简单的解决方案并没有错，但是对于你正在做的事情，没有任何盖茨比特定的东西，这个插件将你与之联系在一起，它是以不引人注目的JavaScript风格构建的（与它得到的反应差不多相反）

面向反应的解决方案将为您提供更好的服务，其中有很多。我最喜欢的方法是使用包装器（）在每个组件的基础上检测这一点，并设置相关的样式

将

react intersection observer

添加到依赖项中，然后可以执行以下操作：

import { useInView } from "react-intersection-observer"

const AutoPlayingVideo = ({ threshold = 0.15, ...playerProps }) => {
  const [ref, inView] = useInView({ threshold })

  useEffect(() => {
    if (inView) {
      ref.current?.play()
    } else {
      ref.current?.pause()
    }
  }, [ref, inView])

  return (
    <video
      style={{
        transition: "opacity 300ms, transform 300ms",
        opacity: inView ? 1 : 0,
        transform: `translateY(${inView ? 0 : 100}px)`,
      }}
      ref={ref}
      autoPlay
      playsInline
      muted
      loop
      {...playerProps}
    />
  )
}

从“react intersection observer”导入{useInView}
const AutoPlayingVideo=（{threshold=0.15，…playerProps}）=>{
常量[ref，inView]=useInView（{threshold}）
useffect（（）=>{
如果（查看）{
参考当前？.play（）
}否则{
参考当前？暂停（）
}
}，[ref，inView]）
返回(
)
}

在更少的代码中，您可以得到一个可重用的视频组件，带有一个动画条目，在视图中自动播放，在视图外暂停！像这样使用它：

<AutoPlayingVideo
  width="100%"
  height="661"
  preload="auto"
  type="video/webm"
>
  <source src={HomeHeroVideo} media={"(min-width: 768px)"} />
</video>

此外，如果您发现自己经常使用此功能，则很容易将常见行为提取到自己的组件中，以便重用：

import { useInView } from "react-intersection-observer"

const AnimateIn = ({ threshold = 0.15, triggerOnce = false, distance = 100, ...remainingProps }) => {
  const [ref, inView] = useInView({ threshold, triggerOnce })

  return (
    <div
      style={{
        // adjust these as desired
        transition: "opacity 300ms, transform 300ms",
        opacity: inView ? 1 : 0,
        transform: `translateY(${inView ? 0 : distance}px)`,
      }}
      {...remainingProps}
    />
  )
}

// In use:
<AnimateIn distance={30} triggerOnce={true}>
  <h1>Hi Mom!</h1>
</AnimateIn>

从“react intersection observer”导入{useInView}
常量AnimateIn=（{threshold=0.15，triggerOnce=false，distance=100，…remainingProps}）=>{
const[ref，inView]=useInView（{threshold，triggerOnce}）
返回(
)
}
//使用中：
嗨，妈妈！

非常感谢您的建议。本质上，这就是我想要实现的，当它在视图中时（我创建了一个简单的提琴），我还根据您的建议创建了一个沙盒（），但发现上面使用您的方法实现有点困难。实现这一点的最佳方法是什么，并在视图中内联/激活关键帧？@floverocean19如果使用

animation

只需等待元素

inView

即可设置元素样式的

animation

属性。例如，

style={{animation:inView？“您的动画”：“none”}

非常感谢您的建议。本质上，这就是我想要实现的，当它在视图中时（我创建了一个简单的提琴），我还根据您的建议创建了一个沙盒（），但发现上面使用您的方法实现有点困难。实现这一点的最佳方法是什么，并在视图中内联/激活关键帧？@floverocean19如果使用

animation

只需等待元素

inView

即可设置元素样式的

animation

属性。例如，

style={{animation:inView？“您的动画”：“无”}