CODEWITHSUNDEEP
javascriptreactjsanimationecmascript-6react-motion
Tom Pinchen
Tom Pinchen

Reputation: 2497

React Motion willEnter and willLeave not firing

I am trying to get react-motion up and running but for some reason the methods willEnter and willLeave don't seem to be firing when using TransitionMotion.

Currently my setup is as follows: 

import React, { Component } from 'react';
import RecommendationItem from '../typeahead/typeahead_recommendation_block';
import { TransitionMotion, spring } from 'react-motion';

const CALIBRATE = { stiffness: 120, damping: 14 };

export default class Recommendations extends Component {

constructor(props) {
  super(props);

  this.willEnter = this.willEnter.bind( this );
  this.willLeave = this.willLeave.bind( this );
  this.getStyles = this.getStyles.bind( this );
}

willEnter() {
  console.log( 'Enter' );
  return {
    maxHeight :0,
    opacity: 0
  }
}

willLeave(){
  console.log( 'Leave' );
  return {
    maxHeight : spring(0, CALIBRATE),
    opacity: spring(0, CALIBRATE)
  }
}

getStyles() {
  return {
    maxHeight: spring(500, CALIBRATE),
    opacity: spring(1, CALIBRATE)
  }
}

render() {
  const {
    showRecommendations
  } = this.props

  if( !showRecommendations ) {
    return null;
  }

  return (
    <div className="typeahead-recommendations">
      <TransitionMotion
        willEnter={ this.willEnter }
        willLeave={ this.willLeave }
        styles={
          Object.keys( this.props.recommendations ).map( ( key, i ) => ({
            key : `${key}-${i}`,
            data : {
              title           : key,
              recommendations : this.props.recommendations[key]
            },
            style : this.getStyles()
          }))
        }>
        { (interpolate) =>
          <div>
            {
              interpolate.map(block => {
                if( block.data.recommendations.length && block.key !== 'productSuggestions' ) {
                  return  <div key={ block.key } style={ block.style }>
                            <RecommendationItem
                              title={ block.data.title }
                              recommendations={ block.data.recommendations } />
                          </div>
                }
              })
            }
          </div>
        }
      </TransitionMotion>
    </div>
  )
}
}

Recommendations.displayName = "Recommendations";

At the moment the console.logs in willEnter and willLeave are simply never firing. Any advice on why this might be would be much appreciated

Upvotes: 1

Views: 345

Answers (1)

glowind
glowind

Reputation: 1

Maybe you are unmounting the whole TransitionMotion component. You still need to give the "this.props.recommendations" data to TransitionMotion.

For example if you remove an intem inside this.props.recommendations data, transition motion will kept the item around and still passes it into the children function param. So when you're mapping over these items interpolated styles, you're still producing the same components.

It'll keep interpolating, while checking the deleted current item value at every frame. Once the deleted item reaches the specified 0, TransitionMotion will remove it for good.

Upvotes: 0

Related Questions