gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 07:06:22 25 4
gpt4 key购买 nike

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

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

谢谢

最佳答案

您可以使用 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;
}

关于css - 使用 React 在点击区域周围制作小动画(最好只使用 CSS),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51584959/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com