transistionGroup中的React-transisition-group默认元素未获取-enterDone类集

时间:2019-03-19 09:47:01

标签: reactjs react-transition-group

我正在尝试使用react-transition-group对列表中的元素进行动画处理。动画对于添加到列表的元素效果很好。这些都将动画化进出。问题是默认元素不会显示动画。

我要说的是,新元素将-enter-done类设置为它们,而默认元素则没有。有办法吗?

export function Test({
  addNewItem,
  removeItem,
  items,
}: IProps) {


  return (
    <div>

      <TransitionGroup>
        {items.map(item=> (
          <CSSTransition
            key={item.value}
            timeout={500}
            classNames={{
              enter: style.recommendEnter,
              enterActive: style.recommendEnterActive,
              enterDone: style.recommendEnterDone,
              exit: style.recommendExit,
              exitActive: style.recommendExitActive,
              exitDone: style.recommendExitDone,
            }}
            unmountOnExit
          >
            <button
              onClick={() => addItem(item)}
            >
              {item.label}
            </button>
          </CSSTransition>
        ))}
      </TransitionGroup>
      <div />
    </div>
  );
}

0 个答案:

没有答案