按钮不会立即消失；需要在动画期间使用剪辑路径移动鼠标

Question

我正在使用 GSAP 时间线将 clipPath 属性从 circle(0%) 设置为 circle(100%)。

let t1 = useRef();
useEffect(() => {
    t1.current = gsap.timeline({
      defaults: { duration: 0.5, ease: "Back.easeOut.config(2)" },
    });
    t1.current.paused(true); //to ensure animation doesn't play immediately
    t1.current.to(".overlay", { clipPath: "circle(100%)" });
  });

  const handleClick = () => {
    t1.current.play(); //start the animation
  };

  const handleClose = () => {
    t1.current.reverse(0.2); //reverse the animation from 0.2 seconds
  };

完整的 React 组件代码：

import React, { useEffect, useRef } from "react";
import { gsap } from "gsap";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faWindowClose } from "@fortawesome/free-solid-svg-icons";

export default function GSAPFullScreen() {
  let t1 = useRef();
  useEffect(() => {
    t1.current = gsap.timeline({
      defaults: { duration: 0.5, ease: "Back.easeOut.config(2)" },
    });
    t1.current.paused(true); //to ensure animation doesn't play immediately
    t1.current.to(".overlay", { clipPath: "circle(100%)" });
  }, []);

  const handleClick = () => {
    t1.current.play(); //start the animation
  };

  const handleClose = () => {
    t1.current.reverse(0.2); //reverse the animation from 0.2 seconds
  };
  return (
    <>
      <div
        className="overlay"
        style={{
          clipPath: "circle(0%)",
          width: "100%",
          height: "100%",
          position: "fixed",
          overflowY: "scroll",
          overflowX: "hidden",
          backgroundColor: "purple",
        }}
      >
        <FontAwesomeIcon
          icon={faWindowClose}
          size="2x"
          style={{
            position: "absolute",
            top: "2rem",
            right: "2rem",
            color: "white",
            cursor: "pointer",
          }}
          onClick={handleClose}
        />
        <div className="container md" style={{ color: "white" }}>
          <br /> 
          <div style={{ fontWeight: "bold" }}>This is an amazing Question</div>
          <div>What is your question? Can you guess?</div>
          <div>Option 1</div>
          <div>Option 2</div>
          <div>Option 3</div>
          <div>Option 4</div>
        </div>
      </div>
      <div className="container" style={{ height: "100vh" }}>
        <div className="flex">
          <button className="lg p-1 btn" onClick={() => handleClick()}>
            Launch Animation
          </button>
        </div>
      </div>
    </>
  );
}

相关CSS：

   .container {
      max-width: 1100px; /* Ensures heading is in center beyond 1100px*/
      margin: 0 auto; /* Ensures to keep the 1100px container in middle of the screen; 
                           until 1100px it will be on the side and this property will not have any affect*/
    
      overflow: auto; /* This removes the space on the top of the heading which was created because of margin: 10px 0 on h1*/
      padding: 0 40px;
    }

.btn {
  display: inline-block;
  padding: 10px 30px;
  cursor: pointer;
  background: var(--primary-color);
  color: #fff;
  border: none;
  border-radius: 5px;
}
.md {
  font-size: 2rem;
}
.lg {
  font-size: 3rem;
}

.flex {
  display: flex;
  justify-content: center; /* aligns along the main axis*/
  align-items: center;
  height: 100%;
}

.p-1 {
  padding: 1rem; /*1 rem is usually 16px depending the size at root*/
}
.btn:hover:enabled{
transform: scale(0.98); /*reduces the size of button a bit*/
}

Answer 1

当按钮具有伪类:hover 时，将对元素应用变换，这意味着它是the stacking context is changed（另请参见Stacking without the z-index property）。

要解决此问题，您可以将 z-index: 1 添加到 overlay 类或从 :hover 类中删除转换（不理想）。