Question

点击＆＃34;删除＆＃34;按钮，我想要一个动画来删除一个项目，并让其余的集合重新渲染或＆＃34;向上滑动＆＃34;填补空白空间。

我按照了facebook教程，虽然我可以获得项目，然后＃34;淡入＆＃34;在渲染时，它们似乎在离开时没有动画。

分量码

export class PlannerFill extends Component {  
  constructor(props) {
    super(props)
  }

  componentWillMount() { 
    this.props.fetch()

  }

  renderCard(element, key){    
    return (      
      <Card rounded={true} width={400} key={key}>
        <Heading level={2} size={3}>{element.name}</Heading>          
      </Card>
    )
  }

  render() {        
    return (              
        <section className={`${styles}`}>        
          <ReactCSSTransitionGroup 
              transitionAppear={true} 
              transitionName="example" 
              transitionAppearTimeout={1500} transitionEnterTimeout={1500} transitionLeaveTimeout={1300}>                    
          {this.props.fridgeItems.map((element, key) => this.renderCard(element, key))}                  
          </ReactCSSTransitionGroup>
        </section>
    );
  }

}

CSS样式表

.example-leave {
    opacity: 1;
  }

  .example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in;
  }
}

我使用redux处理状态，但我不认为这可能是个问题。以防万一，这里是处理状态变化的reducer：

case SUBTRACT_FILLERPLAN:
      console.log("subtract from fridge reducer")
      const recipe = action.payload
      let fridgeCopy = state.fridgeItems.slice()
      const indexRecipe = fridgeCopy.indexOf(recipe)      
      fridgeCopy.splice(indexRecipe, 1)  
      return Object.assign({}, state, {
        fridgeItems: fridgeCopy
      })

休假时不响应的CSS转换组（Redux）

0 个答案: