交互动画系列之三:react动画
youngwind opened this issue · 0 comments
youngwind commented
react动画问题所在
假设我们要做下面这样的一个卡片切换的动画。
如果用常规的html+js的思路来解决的话是这样的
- 两个div
- 给第一个div添加退出动画
- 给第二个div添加进入动画
- 完了
看起来并没有什么难度。
如果用react思维来思考的问题,前后两个卡片其实是一个组件。在react的渲染机制中,一个组件渲染一段DOM元素,当数据改变的时候,渲染新的DOM元素并且直接替换原来的DOM元素,毫无过渡性可言。
也就是说,如果不采取特殊方法的话,同一个组件渲染的DOM元素不可能同时出错在DOM中。
解决思路:
- 用两个组件来模拟。把一个组件实例化两遍,但是这样子实现好搓。
- 用react本身实现。
我们看第二个思路。其实react原生就有这个工具来处理动画,ReactCSSTransitionGroup。
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动画,但是如果你想在动画结束之后等特殊时间点触发一些事情,那么还需要使用ReactTransitionGroup
- 目前组件的动画没问题了,但是container之间切换的话如何使用这个应用动画呢?