Javascript CSS转换仅在类返回React.js时触发

我想实现的是ufc.com上的导航栏

到目前为止，我已经得到了我想要的一切，除了CSS转换只有在返回到原始宽度时才起作用。因此，当我向下滚动时，宽度将捕捉到100%，无需转换

基本上，我使用的是一个flex显示器，它在左右两侧用两个间隔分隔符封装导航栏，这样过渡段在两侧均匀地伸缩

在我的React Navbar类中，我有一个滚动事件侦听器，它向我的nav项添加一个类名

import React, { useEffect, useState } from 'react';
import { Navbar, NavItem } from 'reactstrap';
import './Nav.css';

function Nav() {
  let nav = 'nav';
  let spacer = 'spacer';
  const [scrolled, setScrolled] = useState();

  const handleScroll = () => {
    setScrolled(document.documentElement.scrollTop);
  };

  useEffect(() => {
    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  });

  if (scrolled > 0) {
    nav = 'nav scrolled';
    spacer = 'spacer scrolled';
  }

  return (
    <div className='nav-container'>
      <div className={spacer} />
      <Navbar className={nav}>
        <div className='items-box'>
          <NavItem className='nav-item'>Projects</NavItem>
          <NavItem className='nav-item'>
            <strong>NAME</strong>
          </NavItem>
          <NavItem className='nav-item'>Resume</NavItem>
        </div>
      </Navbar>
      <div className={spacer} />
    </div>
  );
}

export default Nav;

---

我相信我的问题在于间隔和间隔。滚动类，任何帮助都将不胜感激。

好吧，我明白了，我只是像往常一样艰难地处理它。 以下是我的新解决方案：

import React, { useEffect, useState } from 'react';
import { Navbar, NavItem } from 'reactstrap';
import './Nav.css';

    function Nav() {
      let nav = 'nav';
      const [scrolled, setScrolled] = useState();
    
      const handleScroll = () => {
        setScrolled(document.documentElement.scrollTop);
      };
    
      useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      });
    
      if (scrolled > 0) {
        nav = 'nav scrolled';
      }
    
      return (
        <Navbar className={nav}>
          <div className='items-box'>
            <NavItem className='nav-item'>Projects</NavItem>
            <NavItem className='nav-item'>
              <strong>NAME</strong>
            </NavItem>
            <NavItem className='nav-item'>Resume</NavItem>
          </div>
        </Navbar>
      );
    }
    
    export default Nav;

---

使用“位置：固定”将导航栏捕捉到窗口的左窗格，使其不均匀展开。Jut使用像这样的位置粘性和过渡效果非常好。

好吧，我明白了，我只是像往常一样艰难地进行着。 以下是我的新解决方案：

import React, { useEffect, useState } from 'react';
import { Navbar, NavItem } from 'reactstrap';
import './Nav.css';

    function Nav() {
      let nav = 'nav';
      const [scrolled, setScrolled] = useState();
    
      const handleScroll = () => {
        setScrolled(document.documentElement.scrollTop);
      };
    
      useEffect(() => {
        window.addEventListener('scroll', handleScroll);
        return () => window.removeEventListener('scroll', handleScroll);
      });
    
      if (scrolled > 0) {
        nav = 'nav scrolled';
      }
    
      return (
        <Navbar className={nav}>
          <div className='items-box'>
            <NavItem className='nav-item'>Projects</NavItem>
            <NavItem className='nav-item'>
              <strong>NAME</strong>
            </NavItem>
            <NavItem className='nav-item'>Resume</NavItem>
          </div>
        </Navbar>
      );
    }
    
    export default Nav;

---

使用“位置：固定”将导航栏捕捉到窗口的左窗格，使其不均匀展开。Jut使用像这样的位置粘性和过渡效果非常好。

在过渡调用中添加“宽度”；基本上你是在调用时间和类型，但不是要转换什么（如果我猜对的话，另一个调用就是要影响宽度）：转换：0.7s线性宽度；很抱歉，我应该提到，我已经尝试过了，但仍然存在相同的问题。我只是猜测，但也许您需要DOM中的样式标记（内联）中的这些类，以便浏览器可以调用转换？这可能会有帮助：这里有一个更好的答案：对于看起来像React的东西，需要控制何时应用css，以便可以进行转换；基本上你是在调用时间和类型，但不是要转换什么（如果我猜对的话，另一个调用就是要影响宽度）：转换：0.7s线性宽度；很抱歉，我应该提到，我已经尝试过了，但仍然存在相同的问题。我只是猜测，但也许您需要DOM中的样式标记（内联）中的这些类，以便浏览器可以调用转换？这可能会有所帮助：这里有一个更好的答案：从外观上看，它看起来像React，需要控制何时应用css，这样才能发生转换。

.nav {
  align-content: center;
  text-align: center;
  flex: auto;
  width: 60%;
  color: black;
  margin: auto;
  background-color: white;
  height: 4rem;
  top: 3rem;

  transition: width 0.7s linear, top 0.1s;
}

.nav.scrolled {
  width: 100%;
  margin: auto;
  top: 0;
  position: sticky;
}

.items-box {
  list-style: none;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.nav-item {
  margin-left: 1rem;
  margin-right: 1rem;
  transition: 0.3s;
}

.nav-item:hover {
  cursor: pointer;
  color: forestgreen;
}