反应 CSS 翻译转换不起作用答案

【问题标题】：React CSS Translate Transition not working反应 CSS 翻译转换不起作用
【发布时间】：2020-11-28 03:15:36
【问题描述】：

我正在尝试为侧边菜单设置动画，但由于某种原因它无法正常工作！

我阅读了一些答案，认为使用地图来映射 <li> 项目可能是问题所在（我只尝试了几个带有静态文本的项目），但这似乎不是问题。

另外，我还把生成的item放入了一个state，并用useEffect包装了set来防止map的重新触发，还是不行。只有过渡不起作用，菜单出现在它必须出现的地方，当我单击菜单按钮时自行关闭，等等。

编辑：我认为值得一提的是，在我的开发服务器上处理它时，当我更新我的 css 文件（它不刷新页面）时，当我更改一些样式时使侧边栏移动，它与动画一起移动，所以动画就在那里，当我单击打开/关闭按钮时它不起作用，但它只是立即出现。

附： uuid() 为每个元素生成唯一键，所以这也不是问题。

export default function SideBar({ names, closeSidebarOnClick, show }) {
  const [robots, setRobots] = useState();

  useEffect(() => {
    setRobots(GenerateNavItems());
  }, names);

  function GenerateNavItems() {
    return names.map((robotName) => {
      return (
        <li key={uuid()} className={`nav-item`} onClick={() => {closeSidebarOnClick();}}>
          {robotName}
        </li>
      );
    });
  }
      
  return (
    <nav className={`sidebar ${show ? "show-sidebar" : ""}`}>
      <ul>{robots}</ul>
    </nav>
  );
}

.nav-item {
  padding-left: 15px;
  text-decoration: none;
  font-weight: bold;
}

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

.toggle-sidebar-button {
  user-select: none;
  cursor: pointer;
  padding-left: 1.5rem;
  padding-top: 0.5rem;
  border: none;
  background: transparent;
  z-index: 300;
  /* z-index: 50; */
}

.toggle-sidebar-button:active {
  border: none;
}

.toggle-sidebar-button-line {
  width: 35px;
  height: 5px;
  background-color: black;
  margin: 6px 0;
}

.sidebar {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  width: 200px;
  z-index: 200;
  background-color: white;
  transform: translateX(-100%);
  transition: transform 1s ease;
}

.sidebar.show-sidebar {
  transform: translateX(0);
}

.sidebar ul {
  height: 100%;
  list-style: none;
  padding-left: 3rem;
  padding-top: 3rem;
  display: flex;
  flex-direction: column;
}

<div id="root">
  <div class="content row">
    <div class="toggle-sidebar-button">
      <div class="toggle-sidebar-button-line"></div>
      <div class="toggle-sidebar-button-line"></div>
      <div class="toggle-sidebar-button-line"></div>
    </div>
    <nav class="sidebar ">
      <ul>
        <li class="nav-item">ROBOT 1</li>
        <li class="nav-item">ROBOT 2</li>
      </ul>
    </nav>
    <div class="rendered-robot col">
      <div>CHOOSE ROBOT</div>
    </div>
  </div>
</div>

【问题讨论】：

你能在渲染的 html 和 css 中包含一个堆栈 sn-p 示例吗？
我不太清楚你的意思？你想看 html 树吗？
试过 transform: translateX(-100px); 我的意思是不要使用 % 而是使用 px
@Sean 我已经添加了 sn-p
@Ishank 刚试过，不行

标签： css reactjs css-transitions

【解决方案1】：

当您重新渲染导航组件时，可能会导致过渡不可见。我建议你试试这个实验 - 在closeSidebarOnClickdont 不要让它重新渲染，只需使用 - document.getElementsByTagName('nav')[0].classList.add('show-sidebar');

有一种方法可以创建React.createRef() 或useRef，如here 所述，但这又不是经常使用。

好吧，这可能是一个不好的做法，但是当涉及到 css 动画时，我们有什么替代方案？我一直通过 redux 使用这些动画 :) 我认为 dom 不能经常直接操作，但由于这是一个导航栏，并且整个应用程序中可能只有一个导航，所以应该没问题。让我知道，以防你找到让 css 动画正常工作的典型反应方式。

【讨论】：