Javascript 使用Css模块向my side导航添加条件转换样式

我想在我的应用程序的侧边导航中添加一些过渡样式。我可以使用普通类来实现这一点，但是在本教程中，它们使用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;

---

问题是您需要元素始终具有

转换
规则

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

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

.SideDrawer{
位置：固定；
宽度：280px；
最大宽度：70%；
身高：100%；
左：0；
排名：0；
z指数：200；
背景色：白色；
填充：32px 16px；
框大小：边框框；
转变：转变。3s轻松；
转化：translateX（-100%）；
&.表演{
变换：translateX（0）；
}
}

export const App=（）=>{
const[showSideDrawer，setShowSideDrawer]=使用状态（false）；
const sidebarClasses=classname([
样式。侧抽屉，
{
[样式.显示]：showSideDrawer
}
]);
常量切换边栏=（）=>{
返回(
setShowSideDrawer（！showSideDrawer）}>
切换边栏
);
};
返回(
应用程序
边栏内容
);
};

@MoshFeu帮我解决了这个问题

问题是，您仅在showSideDrawer时渲染抽屉，因此在它变为真之前，边栏还不在DOM中，因此转换不会影响它

解决方案是将其始终保持在DOM中，但不切换。打开类以更改样式

有些库知道如何使转换工作，即使对于DOM中不存在的元素也是如此，但这有点复杂

SideDrawer.js在
返回中没有条件的代码修复

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;

class SideDrawer扩展组件{
render（）{
让sideDrawerClass=[classes.SideDrawer]；
//SideDrawer现在将是一个包含SideDrawer类和open类的数组
如果（此.props.showSideDrawer）{
侧抽屉类推（类打开）；
}
返回(
);
}
}
导出默认侧抽屉；
元素是否实际在dom中呈现？您好，是的，当单击“触发我的”时，侧菜单弹出红色背景（我添加了红色，因此我知道添加的是正确的类）。然而，易入易出的转换并不奇怪：SHello@Angelainis您必须将css文件重命名为
SideDrawer.module.css
，以便使用css模块这里有一个链接：如果您尝试检查此元素，
SideDrawerOpen
类样式被禁用了吗？我想这条评论是针对@AhmadShaarawi的。谢谢@Mosh Feu，我会试试看是否能像你那样做。我的一个问题是，我不确定如何使用模块编写条件样式，但我看到您已经使用样式数组完成了。您好，我尝试了这个，是的，我被困在了如何使用css模块的问题上，即如何为
&show
编写逻辑，您这样做的方式是我通常使用带有
&
…你的意思是，问题是如何使用纯css而不是SCS来实现它？@是的，我一直在玩。我已经找到了一种方法，可以在代码中添加一个条件类，但是css仍然不起作用。我将创建一个代码Sandboxi，因为我已经更新了这个示例，并且它与纯css配合得很好。请看一看。。
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;