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

【问题标题】：ReactJS how to apply transitions to inline stylings in react?ReactJS如何在反应中将转换应用于内联样式？
【发布时间】：2021-01-26 03:03:03
【问题描述】：

我目前正在使用 react 为我的网站开发一个响应式导航栏，并且我正在切换导航栏的状态以检查菜单是打开还是关闭。当它打开时，它将应用到 div 样式为transform: translateX(0%)，否则为transform: translateX(100%)。当它是transform: translateX(100%) 时，div 完全不在屏幕上。当我切换菜单时，它只是突然出现，我不确定为什么转换属性不起作用。

在 Header.js 中

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

在 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 文件中的内联样式？

【问题讨论】：

我认为内联样式的任何动画都不会按预期工作，如果您不想创建单独的 CSS 文件，您可以使用这个包styled-components.com

标签： css reactjs

【解决方案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>
  );
}

这是工作的codesandbox

【讨论】：

您好，非常感谢。它看起来棒极了。但是，我想知道是否有办法以类似的方式关闭菜单，让它向后滑动？现在，它只是在您单击关闭时消失。如果可能，我将如何做到这一点？
@HaoranWen 我已经更新了密码框，animation-fill-mode: forwards; 是关键。
非常感谢！

【解决方案2】：

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

【讨论】：