过渡css动画只工作一次

Question

我在由 useState 触发的 React 应用程序中遇到 css 动画问题。 宽度变化之间的动画仅在一个组件上工作一次。 （我在上层有一系列标签）

...

const [isMounted, setIsMounted] = useState(false);


  useEffect(() => {
    console.log(isMounted);
    setIsMounted(true);
    // setIsMounted(false);
    return () => {
      console.log('There is');
      setIsMounted(false);
    }
  }, []);

...

<div
    id={item.label}
    onKeyDown={onKeyDown}      
    className={isMounted ? 'i-tag' : 'no-tag' }
    > {`some text`}
</div>

和 scss 在这里

.i-tag {
  width: 100px;
  position: relative;
  max-width: max-content;
  transition: width 1s ease-in;
}

.no-tag { 
  @extend .i-tag;
  width: 0;
}

Answer 1

您可以将TransitionGroup与CSSTransition使用来为组件数组设置动画。

实际上有两种方法可以在 React 中实现组件数组的动画，

1. 通过您自己的代码来完美地完成它有点棘手
2. 使用一些像“react-transition-group”这样更容易集成的包

如果您想使用“react-transition-group”包，这里是关于如何使用它的代码和框

<TransitionGroup component="ul">
      {todos.map((todo) => (
        <CSSTransition key={todo} timeout={700} classNames="item">
          <li>
            {todo}{" "}
            <button
              onClick={() => {
                setTodos(todos.filter((t) => t !== todo));
              }}
            >
              Delete
            </button>
          </li>
        </CSSTransition>
      ))}
    </TransitionGroup>

礼貌： https : //typeofnan.dev/how-to-animate-items-out-of-an-array-in-react/