我有一个用 React 编写的随机报价生成器：https://codepen.io/1000mileworld/pen/RwNMwKE
当我点击新报价按钮时，我希望之前的报价淡出，新报价淡入。
我试图使用一些 jQuery 在设置新状态之前将不透明度更改为 0，然后将不透明度返回到 1。我可能必须在某个地方的 handleClick() 之外执行此操作，但不确定如何操作。
handleClick() {
$("#text").animate({ opacity: 0 }, 500);
const quote = getRandomQuote();
this.setState({
text: quote.text,
author: quote.author
});
$("#text").animate({ opacity: 1 }, 500);
}
【问题讨论】：
标签： javascript jquery css reactjs
通常不建议在使用 React 渲染这些元素时查询 DOM（即使用选择器选择一个元素以调用 $.animate() on）。
也许您可以考虑另一种方法，将 JQuery 全部绕过，而是使用 CSS 过渡和 React 来实现等效的淡入淡出过渡？
这样的事情可能对你有用：
JSX
const FADE_DURATION = 1000;
class Application extends React.Component {
constructor(props){
super(props);
this.state = {
text: quote.text,
author: quote.author,
// Add extra state to control fading
fadeTransition : null,
fadeState : "fade-in",
}
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
// Create a timer that runs after quote
// fades out
const timeout = setTimeout(() => {
// After current quote faded out, fetch
// next quote and display
const quote = getRandomQuote();
this.setState({
text: quote.text,
author: quote.author,
// Apply additional state to control
// fading transition
fadeTransition : null,
fadeState : 'fade-in'
});
}, FADE_DURATION);
// Stop any existing transition
clearTimeout(this.state.fadeTransition);
// Update state to perform the fade out from
// current quote
this.setState({
fadeState : 'fade-out',
fadeTransition : timeout
});
}
render() {
return (
<div className={`fade-wrapper ${this.state.fadeState}`}
style={{ transitionDuration: `${FADE_DURATION}ms`}}>
<Display text={this.state.text}
author={this.state.author}
click={this.handleClick} />
</div>
);
}
}
CSS
/* Add this to existing css */
.fade-wrapper {
transition:opacity ease-in-out;
}
.fade-out {
opacity:0;
}
.fade-in {
opacity:1;
}
Here's a working example（抱歉，CSS 有点损坏）- 希望对您有所帮助！
【讨论】：
clearTimeout 安排的任何计时器，如上所示。当前状态变量this.state.fadeTransition 上可能实际上不存在计时器，但无论如何我们都会调用它，以防万一。接下来，我们启动fade-out。所有动画都是..
您可以使用 animate 中的回调，并在那里设置状态。比如：
$( "#txt" ).animate({
opacity: 0,
}, 2000, function() {
that.setState({text:"world"});
$( "#txt" ).animate({
opacity: 1,
}, 2000, function() {
// Animation complete.
});
您需要注意“this”的范围需要在回调中处理。我只是在示例中执行 that=this 只是为了演示回调的用法。
【讨论】：