时间戳

首页 > 解决方案 > react / css - 变换动画 - 单击时移动元素

css - react / css - 变换动画 - 单击时移动元素

问题描述

我对 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

非常感谢任何帮助！

标签： cssreactjs

解决方案

像这样的东西，不需要两个状态，我认为你也应该可以删除一些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 &&
            <FaBars className="user-sidebar-menu-icon-bars" />
          }
        </div>
        <div className={`sidebar ${this.state.isShow && '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;

推荐阅读