gpt4 book ai didi

javascript - 如何在 React JS 中重新运行 css3 动画

转载 作者:行者123 更新时间:2023-11-30 09:32:53 25 4
gpt4 key购买 nike

我需要在 ajax 成功后显示几秒钟的快速闪现消息。该消息应在 1/2 秒后自动隐藏。

由于 reactjs 不促进 dom 操作,我想使用 css3 动画实现相同的效果。

这是我准备的简单演示,

当您第一次点击该按钮时,它会显示消息,但在随后的点击中它不会执行任何操作。

class Test extends React.Component {
state = {
show: false
}
showFlashMessage() {
this.setState({
show: true
})
}
render() {
return ( <
div >
<
div className = {
`message ${this.state.show ? "fadeOut": ""}`
} > Hello < /div> <
button id = "but"
onClick = {
this.showFlashMessage.bind(this)
} > Click Me < /button> <
/div>
)
}
}

ReactDOM.render( <
Test / > ,
document.getElementById('container')
);
@keyframes FadeAnimation {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}

.fadeOut {
animation: FadeAnimation 1s ease-in .4s forwards;
}

.message {
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>

JS fiddle :http://jsfiddle.net/2kqv6fo7/9/

我不确定除了 css3 是否还有其他选择。

有什么建议吗?

最佳答案

因为我已经回答了你的 previous question同样,尝试处理状态变化。由于您在上一个问题中提到您正在使用 toggle button,因此我使用了类似的 checkbox,这会对您有所帮助。

我已经让代码仅在 checked 切换时才工作,我假设您也需要在 toggle off 上显示一些消息。通过在两个类之间切换来做同样的事情。并尽量避免内联函数绑定(bind),因为它会在每次渲染时触发。取而代之的是构造函数,它只会在加载组件时执行一次。

class Test extends React.Component {
constructor() {
super();
this.state = {
show: false,
showClass: undefined
}

this.showFlashMessage = (event) => this._showFlashMessage(event);
}

_showFlashMessage(event) {
this.setState({
show: !this.state.show,
showClass: (!this.state.show ? "fadeOut": "fadeOut2")
})
}

render() {
return ( <
div >
<
div className = {
`message ${this.state.showClass}`
} > Hello < /div>
<button id ="but" onClick = {this.showFlashMessage} > Click Me </button><
/div>
)
}
}

ReactDOM.render( <
Test / > ,
document.getElementById('container')
);
@keyframes FadeAnimation {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}

@keyframes FadeAnimation2 {
0% {
opacity: 1;
visibility: visible;
}
100% {
opacity: 0;
visibility: hidden;
}
}

.fadeOut {
opacity: 1;
visibility: visible;
animation: FadeAnimation 1s ease-in .2s forwards;
}

.fadeOut2 {
opacity: 1;
visibility: visible;
animation: FadeAnimation2 1s ease-in .2s forwards;
}

.message {
opacity: 0;
visibility: hidden;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>

关于javascript - 如何在 React JS 中重新运行 css3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45261963/

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