Добавление и удаление активного класса из элементов - PullRequest
Новая
       7

Добавление и удаление активного класса из элементов

0 голосов
/ 22 апреля 2020

Я пытаюсь добавить и удалить активный класс, когда нажимаю на разные панели, которые запускают переход, поэтому, если я нажимаю на разные панели, он работает, как и на нем, запускает переход, а затем завершает его при нажатии на другую панель. , но если я захочу нажать на панель, которая уже была открыта и закрыта, она не будет вызывать ее снова при первом клике и это не очень хороший 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;
}

1 Ответ

0 голосов
/ 22 апреля 2020

Привет, вы можете следовать этому примеру: 

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>
    );
}

Вот стиль. css file 

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

.hide{
    display: none;
}
...