从DOM中移除元素时如何正确实现动画效果？

你的问题核心在于：直接用条件渲染移除组件时，组件会立刻被卸载，动画还没执行完就从视图中消失了。必须等动画完全结束后，再更新状态卸载组件。下面给你两种靠谱的实现方式：

方法一：用Animated组件精确控制（推荐） #

Animated能精准把控动画的每一步，等动画结束后再触发组件卸载，完美解决直接消失的问题。

import { Animated, Button, Text, View, StyleSheet } from 'react-native';
import { useState, useRef } from 'react';

export default function App() {
  const [isExpanded, setIsExpanded] = useState(false);
  // 控制透明度的动画值
  const fadeAnim = useRef(new Animated.Value(0)).current;
  // 控制高度的动画值，让元素从0展开/收缩
  const heightAnim = useRef(new Animated.Value(0)).current;

  const toggleReplies = () => {
    if (isExpanded) {
      // 执行退出动画：同时淡出+收缩高度
      Animated.parallel([
        Animated.timing(fadeAnim, {
          toValue: 0,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(heightAnim, {
          toValue: 0,
          duration: 300,
          useNativeDriver: false, // height属性不支持native driver
        })
      ]).start(() => {
        // 动画完全结束后，再关闭状态卸载组件
        setIsExpanded(false);
      });
    } else {
      setIsExpanded(true);
      // 执行进入动画：淡入+展开高度
      Animated.parallel([
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 300,
          useNativeDriver: true,
        }),
        Animated.timing(heightAnim, {
          toValue: 60, // 回复框的目标高度
          duration: 300,
          useNativeDriver: false,
        })
      ]).start();
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Toggle Replies" onPress={toggleReplies} />
      {isExpanded && (
        <Animated.View 
          style={[
            styles.replyBox,
            {
              opacity: fadeAnim,
              height: heightAnim,
              overflow: 'hidden', // 防止内容在收缩时溢出
            }
          ]}
        >
          <Text>This is a reply!</Text>
        </Animated.View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  replyBox: {
    marginTop: 10,
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
  },
});

方法二：改进LayoutAnimation的用法 #

你原来尝试用LayoutAnimation，但问题出在状态管理冗余和动画配置时机不对。调整后可以自动处理出现/消失动画：

import { LayoutAnimation, Button, Text, View, StyleSheet, UIManager, Platform } from 'react-native';
import { useState } from 'react';

// 安卓需要手动启用LayoutAnimation
if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental(true);
}

export default function App() {
  const [isExpanded, setIsExpanded] = useState(false);

  const toggleReplies = () => {
    // 必须在状态更新前配置动画
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setIsExpanded(!isExpanded);
  };

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  replyBox: {
    marginTop: 10,
    padding: 15,
    backgroundColor: '#f0f0f0',
    borderRadius: 8,
    minHeight: 60, // 给元素一个基础高度，确保动画能生效
  },
});

原代码失效的原因 #

1. 用setTimeout依赖固定时长，和实际动画时长可能不匹配，而且设置isVisible: false后组件立刻被卸载，动画根本没机会执行。
2. LayoutAnimation需要在状态更新前配置，你原代码里的状态更新拆分了setIsVisible和setIsExpanded，导致动画没有正确绑定到组件的卸载过程。

内容的提问来源于stack exchange，提问作者Christopher Mellor