0

我有一个使用 'locomotive-scroll' 和 'react-intersection-observer' 的反应应用程序。该Installation组件具有“机车滚动”的水平滚动。我想观看 '.video-gallery' 和 '.video-box-wrapper' div 来做一些动画，因为它出现在屏幕上（通过分配不同的类名）。videoGalleryInView 正确观看“.video-gallery”并执行我想要的动画。但这不适用于 boxInView，它假设要观看所有的 '.video-box-wrapper' 节点。不仅所有“.video-box-wrapper”的动画同时发生，而且它似乎正在观看 videoGalleryRef 而不是 boxRef。下面是相关代码。任何帮助是极大的赞赏！

import React, { useState, useRef, useEffect, useCallback } from "react";
import "../styles/Installation.css";
import LocomotiveScroll from 'locomotive-scroll';
import '../../node_modules/locomotive-scroll/src/locomotive-scroll.scss';
import { VideoModal } from './VideoModal';
import { useInView } from 'react-intersection-observer';

function Installation() {
  const [showModal, setShowModal] = useState(false);
  let openModal = () => {
    setShowModal(prev => !prev);
  }
  const installRef = useRef(null);
  const ref = useRef();

  const [videoGalleryInViewRef, videoGalleryInView] = useInView({
    threshold: 0.2
  });

  const [boxInViewRef, boxInView] = useInView({
    threshold: 0.1
  });

  const boxRef = useCallback(
    (node) => {
      ref.current = node;
      boxInViewRef(node);
      console.log('the node: ', node);
    },
    [boxInViewRef],
  );

  const videoGalleryRef = useCallback(
    (node) => {
      ref.current = node;
      videoGalleryInViewRef(node);
    },
    [videoGalleryInViewRef],
  );

  useEffect(() => {
    if(videoGalleryInView) {
      document.querySelector(".navbar-installation").classList.add('navbar-shrink');
    } else {
      document.querySelector(".navbar-installation").classList.remove('navbar-shrink');
    }

  },[videoGalleryInView]);

  useEffect(() => {
    window.scrollTo(0, 0);
    if(installRef){
      var scroll = new LocomotiveScroll({
        el: installRef.current,
        smooth: true,
        direction: "horizontal",
      })
    }
    return () => {
      scroll.destroy();
    }
  }, []);

  return (
    <>
      <VideoModal showModal = {showModal} setShowModal={setShowModal}/>
     
        <div className="installation-container" data-scroll-container ref={installRef} >
          <div className="installation-content">

            <div className="installation-bg" 
              data-scroll
              data-scroll-speed="-10"
              data-scroll-position="left">
            </div>

            <div className="video-instructions">
              <div className="video-instruction-text">
                Video Instructions
                <div className="video-instruction-subtext">
                  Adhesive mounting installation
                </div>
              </div>
            </div>            

            <div className="video-gallery" ref={videoGalleryRef}>
              <div className="video-box-wrapper" id="vid1" onClick={openModal} ref={boxRef}>
                <div className={boxInView ? "video-box reveal-vid" : "video-box hide-vid"}>
                  <img id="vid-thumbnail" src="./productphotos/bathroomcaddy-black.jpg" alt=""/>
                  <div className="product-name">Bathroom Shower Caddy</div>
                  <div className="watch-text">Watch</div>
                  <span className="box-color box-color1"></span>
                </div>
              </div>
              <div className="video-box-wrapper" id="vid2" ref={boxRef}>
                <div className={boxInView ? "video-box reveal-vid" : "video-box hide-vid"}>
                  <img id="vid-thumbnail" src="./productphotos/cornercaddy-black.jpg" alt=""/>
                  <div className="product-name">Bathroom Shower Caddy</div>
                  <div className="watch-text">Watch</div>
                  <span className="box-color box-color2"></span>
                </div>
              </div>   
            </div>
          </div>
        </div>
    </>
  );
}

export default Installation;
4

0 回答 0