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

【问题标题】：CSS transition only firing on class return React.jsCSS 转换仅在类返回 React.js 时触发
【发布时间】：2021-01-15 15:45:11
【问题描述】：

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

到目前为止，我已经得到了我想要的一切，除了 CSS 过渡仅在返回原始宽度时才有效。因此，当我向下滚动时，宽度会捕捉到 100% 而没有过渡。

基本上，我使用的是一个 flex 显示器，它用左右两个分隔符 div 封装我的导航栏，以便过渡在两侧均匀地扩展和收缩。

在我的 React Navbar 类中，我有一个滚动事件监听器，它为我的导航项添加一个类名。

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;

CSS

.nav-container {
  display: flex;
  flex-direction: row;
}
.spacer {
  max-width: 20%;
  width: 20%;
  transition: 0.7s linear;
}
.spacer.scrolled {
  width: 2%;
}

.nav {
  flex: auto;
  width: 100%;
  color: black;
  margin: auto;
  background-color: white;
  height: 4rem;
  top: 3rem;
  transition: all 0.2s;
}

.nav.scrolled {
  width: 100%;
  top: 0;
  position: fixed;
}

.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;
}

我相信我的问题存在于 spacer 和 spacer.scrolled 类中，我们将不胜感激。

【问题讨论】：

在过渡调用中添加“宽度”；基本上你是在调用时间和类型，而不是转换什么（如果我猜对了，你只是想影响宽度）：transition: 0.7s linear width;
对不起，我应该提到，我已经尝试过，但仍然有同样的问题。
我只是在猜测，但也许您需要 DOM 中的样式标记（内联）中的这些类，以便浏览器可以调用转换？这可能会有所帮助：stackoverflow.com/questions/39432867/react-css-transitions
这里有一个更好的答案：stackoverflow.com/questions/37677059/… 从外观上看，React 需要控制何时应用 css 以便发生转换。

标签： javascript css reactjs css-transitions

【解决方案1】：

好吧，我想通了，我只是像往常一样艰难地处理它。这是我的新解决方案：

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;

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;
}

原来使用 position:fixed 将导航栏捕捉到窗口的左窗格，使其扩展不均匀。像这样使用位置粘性和过渡效果非常好。

【讨论】：