从元素中添加和删除活动类

Question

我试图添加和删除活动类，当我点击不同的面板，触发过渡，所以如果我点击不同的面板，它的工作原理，因为在它触发过渡，然后它结束时，其他面板被点击，但如果我想点击一个面板，已经打开和关闭，它不会触发它再次在第一次点击广告，这不是很好的UX.我写它在React和我是一个初学者，所以也许我没有做一些正确的事情.你可以看到下面的代码，我希望我给所有正确的信息。

componentDidMount() {
    ReactDom.findDOMNode(this).addEventListener("transitionend", (e) => {
      if (
        e.propertyName.includes("flex") &&
        e.target.classList.contains("open")
      ) {
        e.target.classList.add("open-active");
      }
    });

    ReactDom.findDOMNode(this).addEventListener("click", (e) => {
      const elems = document.querySelector(".open-active");
      if (elems !== null) {
        elems.classList.remove("open-active", "open", "opac");
      }
      e.target.className = "open-active";
      console.log(e);
    });
  }

  render() {
    const { index, top, bottom, image, open, onClick } = this.props;

    const style = {
      backgroundImage: `url(${image})`,
    };

    const openValue = open ? "open opac" : "";
    return (
      <div
        className={`panel ${openValue}`}
        style={style}
        onClick={() => {
          onClick(index);
        }}
      >
</div>

和CSS

.panel > * {
  margin: 0;
  width: 100%;
  transition: transform 0.5s;
  flex: 1 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.panel > *:first-child {
  transform: translateY(-100%);
}

.panel.open-active > *:first-child {
  transform: translateY(0);
}

.panel > *:last-child {
  transform: translateY(100%);
}

.panel.open-active > *:last-child {
  transform: translateY(0);
}

.panel p:nth-child(2) {
  font-size: 4em;
}

.panel.open {
  font-size: 16px;
  flex: 5;
}

Answer 1

你好，你可以按照这个例子。

import React, {useState} from "react";
import './styles/style.css'

export default function ShowHideExample() {
    const [cssClass, setCssClass] = useState('hide');

    return (
        <div className="App">
            <h2>Show or Hide div</h2>
            <button onClick={() => {
                (cssClass === 'hide')? setCssClass('show') :  setCssClass('hide');
            }}>Click me to show or hide the div
            </button>
            <div className={cssClass}>
                <h1>This is dynamically shown</h1>
            </div>
        </div>
    );
}

下面是style.css文件

.show{
    display: block;
    background: dodgerblue;
    padding:20px;
}

.hide{
    display: none;
}