检查codepen http://codepen.io/anon/pen/EZJjNO的代码段 单击添加按钮,它将添加另一个项目,但它立即出现,没有任何淡入淡出效果。
JS:
class App extends React.Component {
constructor(props) {
super(props);
this.addItem = this.addItem.bind(this);
this.state = {
items: [1,2,3]
}
}
addItem() {
var items = this.state.items;
items.push(4);
this.setState({
items: items
})
}
render() {
return (
<div className="App">
{
this.state.items.map(function(i) {
return <div className="item fade">Testing</div>
})
}
<button onClick={this.addItem}>Add</button>
</div>
);
}
}
React.render(<App />, document.body);
CSS:
.App {
background-color: rgba(0,0,0, 0.5);
text-align: center;
height: 100vh;
}
div.item {
border: 1px solid #ccc;
padding: 10px;
background: #123456;
color: #fff;
opacity: 0;
transition: all 0.4s ease-out;
}
.fade {
opacity: 1 !important;
}
答案 0 :(得分:2)
由于默认情况下会添加fade
课程,因此您无法获得过渡效果。如果您打开浏览器的开发者工具并删除该课程,您会发现它很快就会消失。
有几种方法可以获得你想要的东西,但我只是使用像这样的关键帧CSS动画:
.fade {
animation: 0.4s ease-out fadeIn 1;
}
@keyframes fadeIn {
0% {
opacity: 0;
visibility: hidden;
}
100% {
opacity: 1;
visibility: visible;
}
}
Here's a fork of your code pen展示它的运作方式:)