gpt4 book ai didi

css - ReactCSSTransitionGroup 动画表格单元格

转载 作者:行者123 更新时间:2023-11-28 12:11:38 26 4
gpt4 key购买 nike

我想更新表格单元格 ReactCSSTransitionGroup 中的值,并在实时更改值时以视觉方式显示动画,但有问题:表格行似乎没有更新,而多个 div 有显示差异:

http://jsfiddle.net/jj0byzz0/33/

例子如下:

var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var AniTest = React.createClass({
render: function () {
var content = this.state.numbers.map(function(number){
return (
<tr key={number}>
<td>
<ReactCSSTransitionGroup component="div" transitionName="aninumber" >
<div key={number}>{number}</div>
</ReactCSSTransitionGroup>
</td>
</tr>
)
});

return (
<div>
<ReactCSSTransitionGroup transitionName="aninumber" >
<div key={this.state.numbers[0]}> {this.state.numbers[0]} </div>
<div key={this.state.numbers[1]}> {this.state.numbers[1]} </div>
</ReactCSSTransitionGroup>
<br/>
Table Animation

<table >
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
{content}
</tbody>
</table>
</div>
)
},

componentDidMount: function(){
setInterval(this.updateNumbers, 5000);

},

updateNumbers: function() {

this.setState({numbers:[Math.floor(Math.random() * 1000), Math.floor(Math.random() * 1000)]});

},

getInitialState: function(props){
return {
numbers:[1,2]
};

}
});

React.render(<AniTest/>, document.getElementById("anitest"));

和CSS:

.aninumber-enter {
background-color: green;
transition: background-color .5s ease;
}

.aninumber-enter.aninumber-enter-active {
background-color: transparent;
}

.aninumber-leave {
background-color: transparent;
transition: background-color .5s ease;
}

.aninumber-leave.aninumber-leave-active {
background-color: green;
}

最佳答案

不要在您的内容变量中插入多个 CSSTransitionGroup 标签。相反,删除显式的 tbody 标签,并替换为:

<ReactCSSTransitionGroup component="tbody" transitionName="aninumber">
{content}
</ReactCSSTransitionGroup>

这个单个 TransitionGroup 呈现为 tbody 元素并控制内部 tr 子元素的动画。

使用 React v0.13 的工作 fiddle :http://jsfiddle.net/faria/tefxbjtL/

关于css - ReactCSSTransitionGroup 动画表格单元格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30409396/

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