1

我正在尝试启动并运行 react-motion，但由于某种原因，这些方法在使用 TransitionMotion 时似乎willEnter并willLeave没有被触发。

目前我的设置如下：

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";

目前， willEnter 和 willLeave 中的 console.logs 根本不会触发。任何关于为什么会这样的建议将不胜感激

4

1 回答 1

0

也许您正在卸载整个TransitionMotion组件。您仍然需要将“this.props.recommendations”数据提供给TransitionMotion.

例如，如果您删除intem内部this.props.recommendations数据，过渡运动将保留该项目并仍将其传递给子函数参数。因此，当您映射这些项目插值样式时，您仍然会生成相同的组件。

它会继续插值，同时在每一帧检查已删除的当前项目值。一旦删除的项目达到指定的 0，TransitionMotion将永久删除它。

于 2017-06-20T16:20:49.193 回答