使用React Motion的TransitionMotion,我想对1个或更多盒子进行动画制作。当一个框进入视图时,其宽度和高度应从0像素变为200像素,其不透明度应从0变为1。当该框离开视图时,应该发生相反的情况(宽度/高度= 0,不透明度= 0 )
我已经尝试在这里http://codepen.io/danijel/pen/RaboxO解决此问题,但是我的代码无法正确转换该框。框的样式立即跳到200像素的宽度/高度,而不是过渡到其中。
代码有什么问题?
let Motion = ReactMotion.Motion let TransitionMotion = ReactMotion.TransitionMotion let spring = ReactMotion.spring let presets = ReactMotion.presets const Demo = React.createClass({ getInitialState() { return { items: [] } }, componentDidMount() { let ctr = 0 setInterval(() => { ctr++ console.log(ctr) if (ctr % 2 == 0) { this.setState({ items: [{key: 'b', width: 200, height: 200, opacity: 1}], // fade box in }); } else { this.setState({ items: [], // fade box out }); } }, 1000) }, willLeave() { // triggered when c's gone. Keeping c until its width/height reach 0. return {width: spring(0), height: spring(0), opacity: spring(0)}; }, willEnter() { return {width: 0, height: 0, opacity: 1}; }, render() { return ( <TransitionMotion willEnter={this.willEnter} willLeave={this.willLeave} defaultStyles={this.state.items.map(item => ({ key: item.key, style: { width: 0, height: 0, opacity: 0 }, }))} styles={this.state.items.map(item => ({ key: item.key, style: { width: item.width, height: item.height, opacity: item.opacity }, }))} > {interpolatedStyles => <div> {interpolatedStyles.map(config => { return <div key={config.key} style={{...config.style, backgroundColor: 'yellow'}}> <div className="label">{config.style.width}</div> </div> })} </div> } </TransitionMotion> ); }, }); ReactDOM.render(<Demo />, document.getElementById('app'));
按照该 文件 的styles下TransitionMotion部分(我不声称已经完全了解这一切:)):
styles
TransitionMotion
样式:… TransitionStyle的数组…
这里要注意的关键是,此库处理(或至少是其中的这一部分)有两种类型的 样式 对象,TransitionMotion并且将它们称为TransitionStyle和TransitionPlainStyle。
TransitionStyle
TransitionPlainStyle
传入styles属性的先前值为TransitionPlainStyle。将其更改为TransitionStyle 魔术般即可 开始对Enter序列进行动画处理。
Enter
您可以在 此处 阅读有关上述2种不同类型的更多信息。
styles={this.state.items.map(item => ({ key: item.key, style: { width: spring(item.width), height: spring(item.height), opacity: spring(item.opacity) } }))}
分叉的Codepen演示 。
再说一次,我还不完全了解它的内部工作原理。我只知道您styles必须按照上述方式进行更改才能使其正常运行。
如果有人也可以对我进行教育,我会很高兴。
希望这可以帮助。