从 dom 中移除时的动画

Question

从 DOM 中删除某些内容时执行动画的正确方法是什么？

似乎无论我做什么，当我从 dom 中删除某些内容时，它都不会触发重新渲染，直到这些项目被删除，然后它就会从视图中消失，而不是在删除数据之前进行转换。这是我尝试过的示例。

  const [isExpanded, setIsExpanded] = useState(false);
  const [isVisible, setIsVisible] = useState(false);

  const toggleReplies = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

    if (isExpanded) {
      setIsVisible(false);
      setTimeout(() => {
        setIsExpanded(false);
      }, 300);
    } else {
      setIsExpanded(true);
      setIsVisible(true);
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle Replies" onPress={toggleReplies} />
      {isVisible && (
        <View style={styles.replyBox}>
          <Text>This is a reply!</Text>
        </View>
      )}
    </View>
  );
};

Answer 1

这是对 React 组件和元素进行动画处理的常见问题，React 正在创建和销毁 dom 节点，因此浏览器不会将任何样式应用于不存在的元素。

有2个选项可以实现你想要的，只需更改样式并将节点保留在dom中，或者你可以使用https://reactcommunity.org/react-transition-group/css-transition添加“exit”，“在元素被销毁/创建之前输入“样式”。