Basic TransitionMotion

I’m trying to animate in/out a single component when mounted, however am struggling to find a basic example that doesn’t animate a list/internal state/etc.

I might be misunderstanding how react-motion works, is this possible in a simple way?

// Transition container
class Transition extends React.Component {
  willLeave() {
    return {opacity: spring(0)}
  }

  willEnter() {
    return {opacity: spring(1)}
  }

  getStyles() {
    return [{key: 'one', style: {opacity: spring(1)} }] 
  }

  render() {
    return (
      <div>
        <TransitionMotion styles={this.getStyles()} willLeave={this.willLeave} willEnter={this.willEnter}>
          {int => <div style={{opacity: int.opacity}}> hello there </div>}
        </TransitionMotion>
      </div>
    )
  }
}



// Main container
export default class Container extends React.Component {
  constructor(){
    super()
    this.state = {
      openCard: false,
    }
  }

  openCard(props) {
    this.setState({ openCard: !this.state.openCard })
  }

  render() {
    return <div> {this.state.openCard ? <Transition/> : null } </div>
    )
  }
}

[echenley]

I am using it for Route transitions, which is essentially the same thing (swapping out a single component). Here is my full RouteTransition component:

import React from 'react';
import { TransitionMotion, spring } from 'react-motion';

const willEnter = () => ({
  opacity: 0,
  scale: 0.98
});

const willLeave = () => ({
  opacity: spring(0),
  scale: spring(1.02)
});

const getStyles = () => ({
  opacity: spring(1),
  scale: spring(1)
});

const RouteTransition = ({ children: child, pathname }) => (
  <TransitionMotion
    styles={ [{
      key: pathname,
      style: getStyles(),
      data: { child }
    }] }
    willEnter={ willEnter }
    willLeave={ willLeave }
  >
    { (interpolated) =>
      <div>
        { interpolated.map(({ key, style, data }) =>
          <div
            key={ `${key}-transition` }
            style={ {
              ...styles.wrapper,
              opacity: style.opacity,
              transform: `scale(${style.scale})`
            } }
          >
            { data.child }
          </div>
        ) }
      </div>
    }
  </TransitionMotion>
);

var styles = {
  wrapper: {
    position: 'absolute',
    width: '100%'
  }
};

export default RouteTransition;

It is used like this:

<RouteTransition pathname={ location.pathname }>
  { this.props.children /* current route component */ }
</RouteTransition>

[echenley]

@boyswan My component is guaranteed to have a child, but yours isn’t.

// this array should be empty if there are no children
styles={[{ key: 'key', style: getStyles(), data: children }]} 

You would have to do something like:

styles={ children ? [{ key: 'key', style: getStyles(), data: children }] : [] } 

It’s easier if you’re already dealing with an array. In that case you just use .map:

styles={ items.map(item => ({ key: item.id, style: getStyles(), data: item }) }

Unfortunately in React, this.props.children can be either an array or a single element.