使用 Css 模块将条件转换样式添加到我的侧边导航

Question

我想在我的应用程序的侧面导航中添加一些过渡样式。我可以使用普通类来做到这一点，但是在本教程中他们使用 css 模块，我不确定如何使用 css 模块来做到这一点。

我希望我的导航能够滑入和滑出，在 onClick 函数触发时它会静态跳跃 - toggleSideDrawer。

我已经使用了这个逻辑，但我不确定它是否在做任何事情：

className={props.toggleSideDrawer ? classes.SideDrawerOpen : classes.SideDrawer

基本上我希望当用户单击切换时，transform 属性从 translateX(-100%) 切换到 translateX(0) 但这并没有发生。

侧面导航代码：

import React from "react";
import Logo from "../../Logo/Logo";
import NavigationItems from "../NavigationItems/NavigationItems";
import Backdrop from "../../UI/Backdrop/Backdrop";
import Aux from "../../../hoc/Aux";

import classes from "./SideDrawer.css";

const SideDrawer = props => {
  return (
    <Aux classname={classes.SideDrawer}>
      <Backdrop
        showBackdrop={props.showSideDrawer}
        clicked={props.toggleSideDrawer}
      />
      {props.showSideDrawer && (
        <div
          onClick={props.toggleSideDrawer}
          className={
            props.toggleSideDrawer ? classes.SideDrawerOpen : classes.SideDrawer
          }
        >
          <div className={classes.Logo}>
            <Logo />
          </div>

          <nav>
            <NavigationItems />
          </nav>
        </div>
      )}
    </Aux>
  );
};

export default SideDrawer;

代码在我的布局组件中使用的地方：

import React, { useState } from "react";
import Aux from "../Aux";

import classes from "./Layout.css";
import Toolbar from "../../components/Navigation/Toolbar/Toolbar";
import SideDrawer from "../../components/Navigation/SideDrawer/SideDrawer";

const layout = props => {
  const [showSideDrawer, setShowSideDrawer] = useState(false);

  return (
    <Aux>
      <SideDrawer
        showSideDrawer={showSideDrawer}
        toggleSideDrawer={() => {
          setShowSideDrawer(!showSideDrawer);
        }}
      />
      <Toolbar
        onMenuClick={() => {
          setShowSideDrawer(!showSideDrawer);
        }}
      />
      <main className={classes.mainContent}> {props.children} </main>
    </Aux>
  );
};
export default layout;

CSS:

.SideDrawer {
  position: fixed;
  width: 280px;
  max-width: 70%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: white;
  padding: 32px 16px;
  box-sizing: border-box;
  transform: translateX(-100%);
}
@media (min-width: 500px) {
  .SideDrawer {
    display: none;
  }
}

.Logo {
  height: 11%;
  text-align: center;
}
.SideDrawerOpen {
  position: fixed;
  width: 280px;
  max-width: 70%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  padding: 32px 16px;
  box-sizing: border-box;
  background-color: red;
  transform: translateX(0);
  transition: transform 0.3s ease-out;
}

Answer 1

问题是您需要元素始终transition规则。

我的建议是设置一个静态 class 来保存所有样式，并添加 另一个 仅用于覆盖 transform 以使其移动.

类似的东西（它使用 scss 但使用 css 很容易做到）

.SideDrawer {
  position: fixed;
  width: 280px;
  max-width: 70%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  background-color: white;
  padding: 32px 16px;
  box-sizing: border-box;
  transition: transform .3s ease;
  transform: translateX(-100%);

  &.show {
    transform: translateX(0);
  }
}

export const App = () => {
  const [showSideDrawer, setShowSideDrawer] = useState(false);
  const sidebarClasses = classname([
    styles.SideDrawer,
    {
      [styles.show]: showSideDrawer
    }
  ]);
  const ToggleSidebar = () => {
    return (
      <button onClick={() => setShowSideDrawer(!showSideDrawer)}>
        Toggle Sidebar
      </button>
    );
  };

  return (
    <Fragment>
      <h1>App</h1>
      <div className={sidebarClasses}>
        <div>Sidebar content</div>
        <ToggleSidebar />
      </div>
      <ToggleSidebar />
    </Fragment>
  );
};

https://codesandbox.io/s/xenodochial-framework-04sbe?file=/src/App.jsx

Answer 2

@MoshFeu 帮我解决了这个问题。

问题是您仅在 showSideDrawer 时渲染抽屉，因此在它变为 true 之前，边栏不在 DOM 中，因此过渡不会影响它。

解决方案是一直将其保留在 DOM 中，但切换。打开class更改样式。

有些库知道即使对于不在 DOM 中的元素也可以进行转换，但它有点复杂。

SideDrawer.js 的代码修复 return

中没有条件

class SideDrawer extends Component {
  render() {
    let sideDrawerClass = [classes.SideDrawer];
    // SideDrawer will now be an array  with the side drawer classes and the open class
    if (this.props.showSideDrawer) {
      sideDrawerClass.push(classes.Open);
    }
    return (
      <Aux classname={classes.SideDrawer}>
        <Backdrop
          showBackdrop={this.props.showSideDrawer}
          clicked={this.props.toggleSideDrawer}
        />
        <div
          className={sideDrawerClass.join(" ")}
          onClick={this.props.toggleSideDrawer}
        >
          <div className={classes.Logo}>
            <Logo />
          </div>

          <nav>
            <NavigationItems />
          </nav>
        </div>
      </Aux>
    );
  }
}

export default SideDrawer;

使用 Css 模块将条件转换样式添加到我的侧边导航

Use Css modules add conditional transition styling to my side navigation

javascript

css

reactjs

react-css-modules