Анимация при удалении из dom

Это распространенная проблема при анимации компонентов и элементов реакции. Реакция создает и уничтожает узлы dom, поэтому браузер не применяет никаких стилей к несуществующим элементам.

2 варианта достижения того, чего вы хотите, просто измените стили и сохраните узлы в dom, или вы можете использовать https://reactcommunity.org/react-transition-group/css-transition для добавления «выхода», " введите» стили для элементов непосредственно перед тем, как они будут уничтожены/созданы.

Кристофер.

Анимирование элементов после их удаления из DOM может быть сложной задачей, поскольку React удаляет элемент без лишних слов, и по этой причине элемент просто «выскакивает» и не анимируется, как ожидалось. Есть два надежных подхода, чтобы это исправить:

Решение с использованием анимированного API:

1. Импортируйте Animated и используйте ссылку:

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

2. Настройка анимации:

   const MyComponent = () => {
     const [isVisible, setIsVisible] = useState(true);
     const fadeAnim = useRef(new Animated.Value(1)).current; // Initial opacity value
   
     const toggleReplies = () => {
       if (isVisible) {
         // Fade out animation
         Animated.timing(fadeAnim, {
           toValue: 0,
           duration: 300,
           useNativeDriver: true,
         }).start(() => {
           setIsVisible(false); // Hide component after fade out
         });
       } else {
         setIsVisible(true); // Show component
         // Reset opacity to 1 before fade in
         fadeAnim.setValue(0);
         // Fade in animation
         Animated.timing(fadeAnim, {
           toValue: 1,
           duration: 300,
           useNativeDriver: true,
         }).start();
       }
     };
   
     return (
       <View style = {styles.container}>
         <Button title = "Toggle Replies" onPress = {toggleReplies} />
         {isVisible && (
           <Animated.View style = {{ ...styles.replyBox, opacity: fadeAnim }}>
             <Text>This is a reply!</Text>
           </Animated.View>
         )}
       </View>
     );
   };
   
   const styles = StyleSheet.create({
     container: {
       flex: 1,
       justifyContent: 'center',
       alignItems: 'center',
     },
     replyBox: {
       padding: 20,
       backgroundColor: 'lightgray',
       marginTop: 10,
     },
   });
   
   export default MyComponent;
   

Объяснение:

1. Animated API: используется для создания анимации постепенного появления и исчезновения.
2. Функция toggleReplies: управляет видимостью компонента и запускает анимацию.
3. Условный рендеринг: компонент условно визуализируется на основе состояния isVisible.

Дополнительные советы:

• Обязательно используйте useNativeDriver: true для повышения производительности.
• Отрегулируйте значение duration, чтобы контролировать скорость анимации.

Этот метод обеспечивает эффект плавного перехода при отображении и скрытии компонентов в React Native.

Надеюсь это поможет! Позвольте мне знать, если у вас есть еще вопросы.

Раньше я видел ошибку, когда вам приходилось переносить Layoutanimation.Confi.. за пределы вызова функции. Может быть, в useEffect или просто в рендере функции после инициализации и посмотрим, сработает ли это.

Чтобы Layout Animation работала на Android, вам необходимо включить setLayoutAnimationEnabledExperimental.

Я предполагаю, что вы уже используете React Navigation, поэтому в вашем проекте уже будет доступен React Native Reanimated . Вы можете начать с добавления его в свой package.json, если он еще не присутствует. Затем вы сможете использовать его для входа/выхода из анимации довольно легко.

Я не знаю, что именно вы хотите сделать с исчезновением, но определенно ваше решение — анимация. Я думаю, что следующие коды помогут вам достичь вашей цели:

import React from 'react';
import type {FC, ReactNode} from 'react';
import Animated, {
  FadeInUp,
  FadeOutUp,
  useAnimatedStyle,
  useSharedValue,
} from 'react-native-reanimated';


interface FadeViewProps {
  id: string | number; // <== pass a unique id here
  children?: ReactNode;
}

const FadeView: FC<FadeViewProps> = ({ id, children }) => {
  const opacity = useSharedValue(1);

  const wrapperAnimantedStype = useAnimatedStyle(() => {
    opacity: opacity.value,
  });

  return (
    <Animated.View
      key = {id}
      entering = {FadeInUp}
      exiting = {FadeOutUp}
      style = {[wrapperAnimantedStype]}
    >
     {children}
    </Animated.View>

Когда вы попытаетесь визуализировать его или удалить из пользовательского интерфейса, он покажет вам анимацию затухания. Вы можете вдохновиться этим, чтобы улучшить свое конкретное желание.