您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　10.2.1 Todo应用动画

　　为了展示TransitionGroup的用法，我们来增强前面章节创造的Todo应用，当用户添加一个待办事项时，这个待办事项以淡入的动画方式显示，当用户删除一个待办事项时，以淡出的动画方式显示。

　　增加动画效果，需要修改的文件只有src/todos/views/todoList.js文件，相关代码可以在本书的Github代码库https://github.com/mocheng/react-and-redux/的目录chapter-10/todo_animated下找到。

　　其中作为傻瓜组件的TodoList组件的代码如下：

　　const TodoList = ({todos}) => {

　　return (

　　{

　　todos.map((item) => (

　　key={item.id}

　　id={item.id}

　　text={item.text}

　　completed={item.completed}

　　/>

　　))

　　}

　　);

　　};

　　这个TodoList组件和前面章节版本的区别就是使用了TransitionGroup，TodoItem组件的数组被当做了TransitionGroup的子组件。

　　TransitionGroup中使用了几个prop，其中transitionName是所有动画相关prop的核心，因为它的值关联了TransitionGroup和CSS规则。在这里，transitionName的值为字符串fade，代表这个TransitionGroup相关的CSS类都要以fade为前缀。

　　在TodoList所在的文件中，还要导入相关动画CSS规则，代码如下：

　　import './todoItem.css';

　　导入的CSS规则定义在同目录的todoItem.css文件中，内容如下：

　　.fade-enter{

　　opacity: 0.01;

　　}

　　.fade-enter.fade-enter-active {

　　opacity: 1;

　　transition: opacity 500ms ease-in;

　　}

　　.fade-leave {

　　opacity: 1;

　　}

　　.fade-leave.fade-leave-active {

　　opacity: 0.01;

　　transition: opacity 200ms ease-in;

　　}

　　可以看到，相关CSS规则中所有的类都是以fade为前缀，和transitionName的值一致，然后每个类名都由enter、leave、active这些单词构成，含义在下一节中会详细介绍。

　　现在，用浏览器访问改造过的Todo应用，可以看到增加删除待办事项会有动画的效果。 深入浅出React和Redux