javascript - 我的反应 CSSTransition 动画不起作用
问题描述
试图将 CSSTransition 添加到我的反应应用程序中,但我遇到了这个问题。当我说唱我想要动画的元素时,它会变成空白。任何帮助,将不胜感激。这是我的代码
render() {
return (
<div>
<div id="wrapper">
<div id="quotes-box">
<CSSTransition
in={true}
appear={true}
timeout={500}
classNames="fade"
>
<div className="quote-text fade" ><FontAwesomeIcon icon={faQuoteLeft} size="lg" />{this.selectedQuote ? " " + this.selectedQuote.quote + " " : ""}<FontAwesomeIcon icon={faQuoteRight} size="lg" /></div>
</CSSTransition>
<div className="quote-author" >{this.selectedQuote ? this.selectedQuote.author : ""}</div>
<Button className="btn btn-success btn-lg float-right" onClick={this.next}>New Quotes</Button>
<Button className="btn btn-success btn-lg float-left" ><FontAwesomeIcon icon={faGithub} />{" "} Github</Button>
</div>
<div className="footer"> by Yakubu Ahmed El-rufai</div>
</div>
</div>
)
}
这是我的css文件
//enter
.fade-enter{
opacity: 0;
}
.fade-enter-active{
opacity: 1;
transition: opacity 500ms linear;
}
//exit
.fade-exit{
opacity: 1;
}
.fade-exit-active{
opacity: 0.2;
transition: opacity 500ms linear ;
}
.fade-exit-done{
opacity: 0;
}
//on load
.fade-appear{
opacity: 0;
}
.fade-appear-active{
opacity: 1;
transition: opacity 500ms linear ;
}
解决方案
使用CSSTransition
,您需要提供in
一个会改变的值,因为您指定了 true,它不会做任何事情。在下面的解决方案中,我在 state of 中设置了一个值loaded
并使用它来CSSTransition
工作。
const { Component } = React;
const { CSSTransition } = ReactTransitionGroup;
class App extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false
}
this.loadQuote = this.loadQuote.bind(this)
}
loadQuote() {
this.setState({ loaded: !this.state.loaded });
}
render() {
const { loaded } = this.state;
return (
<div>
<CSSTransition
in={loaded}
timeout={500}
classNames="fade"
>
<div className="fade">Some Quote Text</div>
</CSSTransition>
<button onClick={this.loadQuote}>Load Quote</button>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'));
.fade-enter{
opacity: 0;
}
.fade-enter-active{
opacity: 1;
transition: opacity 500ms linear;
}
.fade-exit{
opacity: 1;
}
.fade-exit-active{
opacity: 0.2;
transition: opacity 500ms linear ;
}
.fade-exit-done{
opacity: 0;
}
.fade-appear{
opacity: 0;
}
.fade-appear-active{
opacity: 1;
transition: opacity 500ms linear ;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-transition-group/2.5.2/react-transition-group.js"></script>
<div id="root"></div>
推荐阅读
- c - 在加载模块以处理 open() 期间如何避免错误?
- python - python中的异常没有产生预期的结果
- google-maps - 谷歌地图的按钮链接在 Chrome 上不起作用
- angular - 使用 ngModel 处理模型更改
- mysql - 将mysql ddl和表数据导出到aws redshift的最佳方法是什么?
- c - 如何修复'第 1 行:语法错误:单词意外(期望“)”)'
- javascript - 保持身份验证状态 Firebase + Chrome 扩展
- javascript - 在 dom 元素上读取 css 转换矩阵会给出相互冲突的值
- javascript - exit().remove() 不在视野范围内时不会删除节点
- python - 如何更改 pandas df 中的日期时间值?