Javascript 如何使用React TransitionMotion willEnter（）

使用，我想设置一个或多个进出框的动画。当一个框进入视图时，它的宽度和高度应该从0像素到200像素，不透明度应该从0到1。当长方体离开视图时，应发生相反的情况（宽度/高度=0，不透明度=0）

我试图在这里解决这个问题，但我的代码无法正确地转换框。长方体的样式立即跳转到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'));

let Motion=ReactMotion.Motion
让TransitionMotion=ReactMotion.TransitionMotion
让spring=reactivemotion.spring
让预设=反应运动。预设
const Demo=React.createClass({
getInitialState（）{
返回{
项目：[]
}
},
componentDidMount（）{
设ctr=0
设置间隔（（）=>{
中心++
控制台日志（ctr）
如果（中心%2==0）{
这是我的国家({
项目：[{key:'b'，宽度：200，高度：200，不透明度：1}]，//淡入框
});
}否则{
这是我的国家({
项目：[]，//淡出框
});
}
}, 1000)
},
威尔离开{
//当c消失时触发。保持c直到其宽度/高度达到0。
返回{宽度：弹簧（0），高度：弹簧（0），不透明度：弹簧（0）}；
},
willEnter（）{
返回{宽度：0，高度：0，不透明度：1}；
},
render（）{
返回(
({
key:item.key，
风格：{
宽度：0，
高度:0,，
不透明度：0
},
}))}
styles={this.state.items.map（item=>({
key:item.key，
风格：{
宽度：item.width，
高度：item.height，
不透明度：item.opacity
},
}))}
>
{interpolatedStyles=>
{interpolatedStyles.map（配置=>{
返回
{config.style.width}
})}
}
);
},
});
ReactDOM.render（，document.getElementById（'app'））；

根据

转换运动

部分下的

风格

的（我并不完全理解：）：

款式：。。。一组TransitionStyle

这里需要注意的关键是，这个库处理两种类型的样式对象（或者至少是它的

TransitionMotion

部分），它将它们称为

TransitionStyle

和

TransitionPlainStyle

以前传递到

styles

属性的值为

TransitionPlainStyle

。将它们更改为

TransitionStyle

会神奇地开始设置

Enter

序列的动画

您可以通过阅读上述两种不同类型的更多信息

styles={this.state.items.map(item => ({
  key: item.key,
  style: {
    width: spring(item.width), 
    height: spring(item.height),
    opacity: spring(item.opacity)
  }
}))}

styles={this.state.items.map(item => ({
  key: item.key,
  style: {
    width: spring(item.width), 
    height: spring(item.height),
    opacity: spring(item.opacity)
  }
}))}

同样，我还没有完全理解它的内部工作原理。我只知道你的

风格

必须以上述方式进行更改才能正常工作

如果有人也能教我这一点，我会很高兴的

---

希望这有帮助。

很好的解释。谢谢塔希尔。