css - 使用 React 在点击区域周围制作小动画(最好只使用 CSS)

Question

我正在寻找一种方法来在我点击的区域周围显示一个小动画，例如，一个先扩大然后缩小直到消失的圆圈。看起来简单的部分是创建动画，这将是一个 CSS 过渡，对我来说困难的是让某些东西出现在我点击的地方(使用 CSS)。

如果没有基于 CSS 的解决方案，我想知道如何使用 React 解决。

谢谢

Answer 1

您可以使用 react-transition-group 中的 CSSTransition。 您正在寻找的一个小例子可能如下所示。

import React from "react";
import "./Style.css";
import { CSSTransition } from "react-transition-group";

export default class Modal extends React.Component {
   state = {
     animate: false
   }
   render() {
    return (
        <React.Fragment>
            <CSSTransition
                in={this.state.animate}
                classNames="animate-circle"
                timeout={500}
            >
                <div 
                    className="circle" 
                    onClick={()=>this.setState({animate: animate ? false : true})} 
                >
                        Click to expand and click again to diminish
                </div>
            </CSSTransition>
        </React.Fragment>
    )
  }
}

Style.css 应该编写类似这样的代码

.circle {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background-color: red;
}
.animate-circle-enter-active {
    width: 500px;
    height: 500px;
    transition: all 500ms infinite;
}
.animate-circle-enter-done {
    width: 500px;
    height: 500px;
}
.animate-circle-exit {
    width: 500px;
    height: 500px;
}
.animate-circle-exit-active {
    width: 0px;
    height: 0px;
    transition: all 500ms infinite;
}
.animate-circle-exit-done {
    width: 0px;
    height: 0px;
}