- xml - AJAX/Jquery XML 解析
- 具有多重继承的 XML 模式
- .net - 枚举序列化 Json 与 XML
- XML 简单类型、简单内容、复杂类型、复杂内容
使用 React Motion's TransitionMotion ,我想为 1 个或多个盒子制作动画。当一个盒子进入 View 时,它的宽度和高度应该从 0 像素到 200 像素,它的不透明度应该从 0 到 1。当盒子离开 View 时,相反的情况应该发生(宽度/高度 = 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'));
最佳答案
根据 documentation TransitionMotion
部分下的 styles
的 (我并不声称完全理解所有这些:)):
styles: ... an array of TransitionStyle ...
这里要注意的关键是这个库处理了两种类型的样式对象(或者至少是它的TransitionMotion
部分)并且它调用它们是 TransitionStyle
和 TransitionPlainStyle
。
传递给 styles
属性的先前值是 TransitionPlainStyle
。将它们更改为 TransitionStyle
神奇地 开始为 Enter
序列设置动画。
您可以在 here 上阅读有关上述 2 种不同类型的更多信息.
styles={this.state.items.map(item => ({
key: item.key,
style: {
width: spring(item.width),
height: spring(item.height),
opacity: spring(item.opacity)
}
}))}
同样,我还没有完全理解它的内部工作原理。我只知道您的 styles
必须以上述方式进行更改才能使其正常工作。
如果有人能就此对我进行教育,我会很高兴。
希望这对您有所帮助。
关于javascript - 如何使用 React TransitionMotion willEnter(),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35740614/
使用 React Motion's TransitionMotion ,我想为 1 个或多个盒子制作动画。当一个盒子进入 View 时,它的宽度和高度应该从 0 像素到 200 像素,它的不透明度应该
我是一名优秀的程序员,十分优秀!