一、需求
1.在页面添加item时要有渐变效果
2.单击item可删除，带渐变效果
二、代码
1.通过Reacat插件ReactCSSTransitionGroup实现
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>React动画</title>
<style>
.example-enter {
opacity: 0.01;
transition: opacity .5s ease-in;
} .example-enter.example-enter-active {
opacity: 1;
} .example-leave {
opacity: 1;
transition: opacity .5s ease-in;
} .example-leave.example-leave-active {
opacity: 0.01;
}
</style>
</head>
<body>
<script src="./react-0.13.2/build/react-with-addons.js"></script>
<script src="./react-0.13.2/build/JSXTransformer.js"></script>
<script type="text/jsx">
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1);
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<button onClick={this.handleAdd}>Add Item</button>
<ReactCSSTransitionGroup transitionName="example">
{items}
</ReactCSSTransitionGroup>
</div>
);
}
});
React.render(<TodoList></TodoList>, document.body);
</script>
</body>
</html>
三、运行结果