首页技术正文

如何在React中使用CSS3动画

工程师子钊技术 2022年11月10日

0 收藏 337 点赞 3,408 浏览 1326 个字

一、需求

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>