Open youngwind opened 8 years ago
假设我们要做下面这样的一个卡片切换的动画。 如果用常规的html+js的思路来解决的话是这样的
看起来并没有什么难度。 如果用react思维来思考的问题,前后两个卡片其实是一个组件。在react的渲染机制中,一个组件渲染一段DOM元素,当数据改变的时候,渲染新的DOM元素并且直接替换原来的DOM元素,毫无过渡性可言。 也就是说,如果不采取特殊方法的话,同一个组件渲染的DOM元素不可能同时出错在DOM中。
解决思路:
我们看第二个思路。其实react原生就有这个工具来处理动画,ReactCSSTransitionGroup。
具体原理和实现方式上面那个链接已经说得非常明白了,下面我就直接给出我的demo
// style .demo { float: left; margin-left: calc(50% - 280px);; margin-right: auto; width: 560px; height: 560px; background-color: #eee; border-radius: 10px; box-shadow: 0px 5px 10px #999; } .example-enter { float: right; margin-left: 0; margin-right: -600px; transition: all 1.5s cubic-bezier(.28, .79, .27, .99) 0.3s; box-shadow: 5px 1px 10px #999; } .example-enter.example-enter-active { margin-right: calc(50% - 280px); box-shadow: 0px 5px 10px #999; } .example-leave { float: left; margin-left: calc(50% - 280px); transition: all 1s cubic-bezier(.74, .42, 1, .65); } .example-leave.example-leave-active { margin-left: -600px; box-shadow: -5px 1px 10px #999; }
// jsx var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup; var WordCarousel = React.createClass({ getInitialState: function () { return {index: 0}; }, handleClick: function () { var index = this.state.index; this.setState({ index: index + 1 }) }, returnWord: function () { if (this.state.index) { return ( <div className="demo" onClick={this.handleClick} key={this.state.index}> <h1>{this.state.index}</h1> </div> ) } else { return ( <button onClick={this.handleClick}>click me</button> ) } }, render: function () { var Word = this.returnWord(); return ( <div style={{overflow:"hidden",padding:"20px 0"}}> <ReactCSSTransitionGroup transitionName="example"> {Word} </ReactCSSTransitionGroup> </div> ); } });
遗留问题:
react动画问题所在
假设我们要做下面这样的一个卡片切换的动画。 如果用常规的html+js的思路来解决的话是这样的
看起来并没有什么难度。 如果用react思维来思考的问题,前后两个卡片其实是一个组件。在react的渲染机制中,一个组件渲染一段DOM元素,当数据改变的时候,渲染新的DOM元素并且直接替换原来的DOM元素,毫无过渡性可言。 也就是说,如果不采取特殊方法的话,同一个组件渲染的DOM元素不可能同时出错在DOM中。
解决思路:
我们看第二个思路。其实react原生就有这个工具来处理动画,ReactCSSTransitionGroup。
ReactCSSTransitionGroup
具体原理和实现方式上面那个链接已经说得非常明白了,下面我就直接给出我的demo
遗留问题: