2017-02-16 62 views
2

检查codepen的片段http://codepen.io/anon/pen/EZJjNO 点击添加按钮,它会添加另一个项目,但它立即出现,没有任何淡化效果。简单的css动画不能在动态reactjs元素上工作

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; 
} 

回答

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展示它是如何工作:)