基于CSS实现MaterialUI按钮点击动画并封装成 React 组件

下面我会详细讲解如何基于CSS实现MaterialUI按钮点击动画并封装为React组件。

1.准备工作

安装MaterialUI

首先需要安装MaterialUI，可以使用npm或yarn进行安装。

npm install @material-ui/core

//或使用yarn
yarn add @material-ui/core

创建按钮组件

接着需要创建一个按钮组件，并引入MaterialUI的Button组件。

import React from "react";
import Button from "@material-ui/core/Button";

export default function MaterialButton({ onClick, children }) {
  return (
    <Button variant="contained" color="primary" onClick={onClick}>
      {children}
    </Button>
  );
}

现在，我们已经可以在其他的React组件中使用该按钮组件了。

2.实现动画效果

接下来，我们需要使用CSS来实现按钮点击时的动画效果。

添加样式

首先，创建一个CSS文件来存放样式。

.button {
  overflow: hidden;
  position: relative;
  z-index: 1;
  transition: transform 0.3s, opacity 0.3s;
}

.button:before {
  content: "";
  display: block;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin: -50px 0 0 -50px;
  opacity: 1;
  border-radius: 50%;
  transform: scale(0);
  transition: transform 0.3s, opacity 0.3s;
  background: rgba(255, 255, 255, 0.6);
}

.button span {
  display: block;
  position: relative;
  z-index: 3;
}

.button.clicked:before {
  opacity: 0;
  transform: scale(3);
}

.button.clicked span {
  z-index: -1;
  opacity: 0;
  transform: translateY(50px);
}

绑定动画效果

然后，我们将该样式绑定到按钮组件上。

import React, { useState } from "react";
import Button from "@material-ui/core/Button";
import "./styles.css";

export default function MaterialButton({ onClick, children }) {
  const [clicked, setClicked] = useState(false);

  const handleClick = () => {
    setClicked(true);

    setTimeout(() => {
      setClicked(false);
    }, 300);

    if(onClick){
      onClick();
    }
  };

  return (
    <Button
      variant="contained"
      color="primary"
      className={`button ${clicked ? "clicked" : ""}`}
      onClick={handleClick}
    >
      <span>{children}</span>
    </Button>
  );
}

到此，我们就完成了按钮点击动画的实现和封装。

3.使用示例

下面是两个示例，展示如何在React中使用该按钮组件。

示例一

import React from "react";
import MaterialButton from "./MaterialButton";

export default function App() {
  const handleClick = () => {
    console.log("Button clicked");
  };

  return (
    <div>
      <MaterialButton onClick={handleClick}>Click Me</MaterialButton>
    </div>
  );
}

示例二

import React, { useState } from "react";
import MaterialButton from "./MaterialButton";

export default function App() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>You clicked the button {count} times</p>
      <MaterialButton onClick={handleClick}>Click Me</MaterialButton>
    </div>
  );
}

以上示例展示了如何在React中使用该按钮组件，并实现了点击动画，希望能对你有所帮助。