Использование модулей Css добавляет стиль условного перехода к моей боковой навигации

Question

Я хотел бы добавить немного стиля перехода к боковой навигации в моем приложении. Я могу сделать это, используя обычные классы, однако в этом уроке они используют css модули, и я не уверен, как это сделать, используя css модули.

Я бы хотел, чтобы моя навигация скользила внутрь и наружу, в момент статического скачка при срабатывании функции onClick - toggleSideDrawer.

Я использовал эту логику c, но я не уверен, что она что-то делает:

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;

Где код используется в моем компоненте Layout:

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 правило все время .

Я предлагаю установить класс c, который будет содержать все стили, и ddd еще один только для переопределения transform, чтобы заставить его двигаться.

Нечто подобное (используется s css, но это легко сделать с помощью 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, поэтому до того, как он станет истинным, боковая панель еще не находится в DOM, поэтому переход не влияет на нее.

Решение состоит в том, чтобы сохранить это в DOM все время, кроме переключения. Откройте класс для изменения стиля.

Существуют библиотеки, которые знают, как сделать переход работающим даже для элементов, которых нет в 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;