ReactJS如何在ReactJS中将转换应用于内联样式？

Question

我目前正在使用react为我的站点开发一个响应型导航条，并且我正在用状态切换导航条，以检查菜单是打开还是关闭。当它打开时，它将应用于div --一种transform: translateX(0%)的样式，否则就是transform: translateX(100%)。当它是transform: translateX(100%)时，div就完全脱离了屏幕。当我切换菜单时，它突然出现，我不知道为什么转换属性不能工作。

In Header.js

{this.state.showMenu ? (
  <div
   className="header__menu"
   style={this.showMenu ? null : { transform: "translateX(100%)" }}
  ></div> : null }

In Header.css

.header__menu {
  position: absolute;
  top: 0;
  right: 0;
  background-color: white;
  outline: 1px solid var(--border-accent);
  padding: 64px 12px 0 12px;
  height: 100vh;
  width: 220px;
  z-index: 9;
  transform: translateX(0%);
  transition: transform 0.5s ease-in-out;
}

如果转换成功的话，预期的行为是让肚脐滑入，而不是突然出现。是否有办法将转换应用到Header.js文件中的内联样式？

Answer 1

你使用了错误的css。

translateX是状态，而不是动画。使用animation代替。

@keyframes menu-open {
  from {width: 0px;}
  to {width: 220px;}
}

.open {
  animation-name: menu-open;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes menu-close {
  from {width: 220px;}
  to {width: 0px;}
}

.close {
  animation-name: menu-close;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.header__menu {
  position: absolute;
  top: 0;
  right: 0;
  background-color: black;
  outline: 1px solid var(--border-accent);
  padding: 64px 12px 0 12px;
  height: 100vh;
  z-index: 9;
}

import cs from 'classnames';
import React from "react";
import "./styles.css";

export default function App() {
  const [showMenu, setShowMenu] = React.useState(false);
  const onClick = React.useCallback(() => {
    setShowMenu(!showMenu);
  }, [showMenu]);
  const classnames = cs('header__menu', {
    open: showMenu,
    close: !showMenu,
  })
  return (
    <div className="App">
      <button onClick={onClick}>{showMenu ? "close" : "open"}</button>
      {<div className={classnames} />}
    </div>
  );
}

这是工作的码箱

Answer 2

应该在样式属性中指定两个转换属性，如:style={ transform : this.showMenu？"translateX(0%)“：”translateX(100%)“}