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

您可以使用 load data local infile 'D:/Learning/DataSets/Customertbl.csv' into table w3school_db.customer fields terminated by ',' lines terminated by '\r\n' ignore 1 rows (`CustomerName`,`ContactName`,`Address`,`City`,`PostalCode`,`Country`); 和 TransitionGroup 为组件数组设置动画。

其实 React 中有两种实现组件数组动画的方式，

通过你自己的代码来完美地完成它有点棘手
使用一些更容易集成的包，如“react-transition-group”

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

CSSTransition

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

过渡css动画只工作一次

1 个答案: