javascript - Hur man använder React TransitionMotion willEnter()

Med React Motions TransitionMotion vill jag animera 1 eller flera rutor in och ut. När en ruta kommer in i vyn ska dess bredd och höjd gå från 0 pixlar till 200 pixlar och dess opacitet ska gå från 0 till 1. När rutan lämnar vyn ska det motsatta hända (bredd/höjd=0, opacitet=0)

Jag har försökt lösa detta problem här http://codepen.io/danijel/pen/RaboxO men min kod kan inte få rutan att övergå in korrekt. Rutans stil hoppar omedelbart till en bredd/höjd på 200 pixlar istället för att övergå in.

Vad är fel med koden?

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'));

Svar #1

Enligt dokumentationen för styles under avsnittet TransitionMotion (och jag påstår inte att jag har förstått allt helt och hållet :)):

stilar: ... en lista med TransitionStyle ...

Det viktiga att notera här är att det finns 2 typer av style-objekt som detta bibliotek hanterar (eller åtminstone denna TransitionMotion-del av det) och det kallar dem TransitionStyle och TransitionPlainStyle.

De tidigare värdena som skickades in i styles-attributet var av TransitionPlainStyle. Att ändra dem till TransitionStyle börjar magiskt animera Enter-sekvensen.

Du kan läsa mer om de 2 olika typerna som nämns ovan här.

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

Gafflad CodePen-demo.

Igen, jag förstår fortfarande inte helt hur det fungerar inuti. Jag vet bara att dina styles var tvungna att ändras på ovanstående sätt för att det skulle fungera.

Jag blir glad om någon också kan undervisa mig om detta.

Hoppas det här hjälper.