---
title: Анимации
seo:
  title: Анимации — React Developer
  description: Тема «Анимации» для собеседования React Developer. Как реализовать анимацию в React-приложении? Как реализовать анимацию переходов между компонентами в React Router?
---

[Все темы React Developer](/react-developer)

## <strong>Как реализовать анимацию в React-приложении?</strong> [#q-14bee738d69b818c8632d363ebd612be]

Для реализации анимации в React-приложении можно использовать CSS-анимации, библиотеки для анимации или React Transition Group.

#### Способы реализации&#58;

{/* prettier-ignore */}
1. <strong>CSS-анимации</strong>&#58;

    - Определите анимации в CSS и примените классы в компонентах.

    ```css
    /* styles.css */
    .fade-enter {
      opacity: 0;
    }
    .fade-enter-active {
      opacity: 1;
      transition: opacity 300ms;
    }
    ```

    ```jsx
    import React from 'react';
    import './styles.css';

    const MyComponent = ({ in: inProp }) => (
      <div className={inProp ? 'fade-enter fade-enter-active' : 'fade-enter'}>
        Hello, World!
      </div>
    );

    export default MyComponent;
    ```

1. <strong>React Transition Group</strong>&#58;

    - Используйте <code>CSSTransition</code> или <code>Transition</code> для управления анимациями при изменении состояния компонента.

    ```jsx
    import React from 'react';
    import { CSSTransition } from 'react-transition-group';
    import './styles.css';

    const MyComponent = ({ in: inProp }) => (
      <CSSTransition in={inProp} timeout={300} classNames="fade">
        <div>Hello, World!</div>
      </CSSTransition>
    );

    export default MyComponent;
    ```

1. <strong>Framer Motion</strong>&#58;

    - Используйте библиотеку <code>framer&#45;motion</code> для более сложных анимаций.

    ```jsx
    import { motion } from 'framer-motion';

    const MyComponent = () => (
      <motion.div animate={{ opacity: 1 }} initial={{ opacity: 0 }} transition={{ duration: 0.5 }}>
        Hello, World!
      </motion.div>
    );

    export default MyComponent;
    ```

Анимацию в React-приложении можно реализовать с помощью CSS-анимаций, <code>React Transition Group</code> или библиотек, таких как <code>framer&#45;motion</code>, для создания плавных и интерактивных эффектов.

:::note[Ссылки для изучения]

1. [Создание интерактивных анимаций с помощью React](https://habr.com/ru/companies/otus/articles/801591/)
   :::

---

## <strong>Как реализовать анимацию переходов между компонентами в</strong> <code>React Router</code><strong>?</strong> [#q-14bee738d69b81a2b0dfd967aeb37127]

Для реализации анимации переходов между компонентами в React Router используйте библиотеку <code>react&#45;transition&#45;group</code> вместе с <code>React Router</code>.

#### Шаги&#58;

{/* prettier-ignore */}
1. <strong>Установка библиотек</strong>&#58;

    ```bash
    npm install react-router-dom react-transition-group
    ```

1. <strong>Создание анимированных переходов</strong>&#58;

    - Оберните маршруты в компонент <code>CSSTransition</code> и используйте <code>Switch</code> для маршрутизации.

#### Пример для React Router 5. Для React Router 6 и 7 API маршрутов нужно адаптировать&#58;

```jsx
import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useLocation,
} from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./styles.css"; // CSS для анимации

const Home = () => <div className="page">Home Page</div>;
const About = () => <div className="page">About Page</div>;

const App = () => {
  const location = useLocation();

  return (
    <TransitionGroup>
      <CSSTransition key={location.key} timeout={300} classNames="fade">
        <Switch location={location}>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
};

const Root = () => (
  <Router>
    <App />
  </Router>
);

export default Root;
```

#### Пример CSS для анимации&#58;

```css
/* styles.css */
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 300ms ease-in-out;
}

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
}
```

Для анимации переходов между компонентами в React Router используйте <code>react&#45;transition&#45;group</code> для обертки маршрутов и определения CSS-анимаций.

:::note[Ссылки для изучения]

1. [Создание интерактивных анимаций с помощью React](https://habr.com/ru/companies/otus/articles/801591/)
   :::

---

## <strong>Как реализовать анимированный переход между компонентами в</strong> <code>React Native</code><strong>?</strong> [#q-14bee738d69b817cb214c95b26d2e04a]

Для реализации анимированных переходов между компонентами в React Native используйте библиотеку <code>react&#45;navigation</code> вместе с анимациями <code>React Native Reanimated</code>.

#### Шаги&#58;

{/* prettier-ignore */}
1. <strong>Установка библиотек</strong>&#58;

    ```bash
    npm install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated
    ```

1. <strong>Конфигурация</strong>&#58;

    - Убедитесь, что правильно настроены <code>react&#45;native&#45;gesture&#45;handler</code> и <code>react&#45;native&#45;reanimated</code> согласно документации.

1. <strong>Создание анимированных переходов</strong>&#58;

    - Используйте <code>createStackNavigator</code> из <code>&#64;react&#45;navigation&#47;stack</code>.

#### Пример&#58;

```jsx
import "react-native-gesture-handler";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import {
  createStackNavigator,
  CardStyleInterpolators,
} from "@react-navigation/stack";
import HomeScreen from "./HomeScreen";
import DetailsScreen from "./DetailsScreen";

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;
```

#### Пример экранов&#58;

```jsx
// HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
  </View>
);

export default HomeScreen;

// DetailsScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = () => (
  <View>
    <Text>Details Screen</Text>
  </View>
);

export default DetailsScreen;
```

Для анимированных переходов между компонентами в React Native используйте <code>react&#45;navigation</code> с <code>createStackNavigator</code> и настройте анимации с помощью <code>CardStyleInterpolators</code>.

:::note[Ссылки для изучения]

1. [Создание интерактивных анимаций с помощью React](https://habr.com/ru/companies/otus/articles/801591/)
   :::