Javascript 如何将JS和GSAP按钮转换为REACT JS

HTML

<div class="container">
    <div class="toggle">
        <div class="menu-btn">
            <span class="one"></span>
            <span class="two"></span>
        </div>
    </div>
</div>

JAVASCRIPT

$(document).ready(function() {
    
    var t1 = new TimelineMax({paused: true});
    
    t1.to('.one', 0.8, {
        y: 6,
        rotation: 45,
        ease: Expo.easeInOut
    });
    
    t1.to('.two', 0.8, {
        y: -6,
        rotation: -45,
        ease: Expo.easeInOut,
        delay: -0.8
    });
    
    t1.reverse();
    $(document).on('click', '.menu-btn', function() {
        t1.reversed(!t1.reversed());
    });
});

有人能告诉我如何在REACT中做同样的事情吗。

请包括GSAP:

---

首先，我想指出，您可能不需要GSAP来完成这项工作。因此，如果这是一个要求，这可能不适合你的需要。我使用简单的CSS动画来旋转两个条。见下文

工作示例

反应代码

import React, {useState} from "react";

function MenuButton(props) {
  const [toggle, setToggle] = useState(false);
  return (
    <div
      class={`menu-btn ${toggle ? "on" : "off"}`}
      onMouseOver={() => setToggle(true)}
      onMouseOut={() => setToggle(false)}
    >
      <span class="one"></span>
      <span class="two"></span>
    </div>
  );
}

你不会把所有东西都复制粘贴到React中；您将了解每个部件的功能，并使用等效的React函数<代码>$（document）.ready（）

例如是React的

组件didmount

。此外，GSAP还有一个react库，它附带了文档和示例：@ChrisG虽然该库很有用，但它不是由GreenSock创建或维护的。您实际上不需要使用库来使用GSAP和React。@Zachsauier当然，我只是向OP指出了一些选项。我主要是想让他们获得更多的经验和谷歌搜索。@ChrisG现在由GREENSOCK维护。

import React, {useState} from "react";

function MenuButton(props) {
  const [toggle, setToggle] = useState(false);
  return (
    <div
      class={`menu-btn ${toggle ? "on" : "off"}`}
      onMouseOver={() => setToggle(true)}
      onMouseOut={() => setToggle(false)}
    >
      <span class="one"></span>
      <span class="two"></span>
    </div>
  );
}

<MenuButton />

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

.menu-btn {
  position: relative;
  width: 40px;
  height: 12px;
  cursor: pointer;
  z-index: 10;
}

.menu-btn span {
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #000;
  transition: transform 0.2s;
}

.menu-btn.off span:first-child {
  transform: translateY(-5px) rotate(0deg);
}
.menu-btn.off span:last-child {
  transform: translateY(5px) rotate(0deg);
}

.menu-btn.on span:first-child {
  transform: translateY(0px) rotate(45deg);
}
.menu-btn.on span:last-child {
  transform: translateY(0px) rotate(-45deg);
}