Блог

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

В моем css я добавляю класс к значку закрытия меню, но анимация не работает

 .user-sidebar-menu-icon-times {
  transform: translateX(0px);
}

.user-sidebar-menu-icon-times.moveleft {
  transform: translateX(-500px);
}
 

и некоторый обработчик щелчка, управляющий переключателем

 {this.state.isClicked ? (
 <FaBars className="user-sidebar-menu-icon-bars" />
) : this.state.isShow ? (
 <FaTimes className="user-sidebar-menu-icon-times moveleft" />
) : (
 <FaTimes className="user-sidebar-menu-icon-times" />
)}
 

Вот ссылка на песочницу, показывающая мою проблему:
https://codesandbox.io/s/adoring-greider-iss80?file=/src/components/Sidebar/Sidebar.js

Любая помощь приветствуется!

что-то вроде этого, не нужны два состояния, также я думаю, что вы также сможете удалить некоторые css

 import React, { Component } from "react";
import "./Sidebar.css";
import { FaBars, FaTimes, FaUserAlt, FaRegMap } from "react-icons/fa";

class Sidebar extends Component {
  state = {
    isShow: false
  };

  handleClick = () => {
    this.setState({
      isShow: !this.state.isShow
    });
  };

  render() {
    return (
      <div className="user-container">
        <div
          className="user-sidebar-menu-icon"
          onClick={this.handleClick}
        >
          {this.state.isShow amp;amp;
            <FaBars className="user-sidebar-menu-icon-bars" />
          }
        </div>
        <div className={`sidebar ${this.state.isShow amp;amp; 'isHideActive'}`}>
          <header>
            Setting
              <FaTimes onClick={this.handleClick} className="user-sidebar-menu-icon-times" />
          </header>
          <a href="#">
            <FaUserAlt className="user-sidebar-icon" />
            <span>Account</span>
          </a>
          <a href="#">
            <FaRegMap className="user-sidebar-icon" />
            <span>something</span>
          </a>
        </div>
      </div>
    );
  }
}

export default Sidebar;