React - анимация меню

Question

У меня есть мобильный меню, https://ibb.co/DR1QCdt я хочу добавить плавное анимацию при открытии меню как можно это делать?

NavbarMobile.jsx

import React from 'react';

import avatar from "../../../backgrounds/tt_avatar_small.jpg"
import lessons from './icons/lessons.png'
import megaphone from './icons/megaphone.png'
import profile from './icons/profile.png'
import home from '../icons/home.png'
import {MobileContainer, MobileDiv, AvatarBlock,
    HomeBorderIcon, MobileImageBlock, UserName, TitleName,} from './css/NavbarMobile-Styled-Component'


export class NavbarMobile extends React.Component {
    render() {
        return <MobileContainer>
            <AvatarBlock>
                <MobileImageBlock>
                    <img width="40" src={avatar} />
                </MobileImageBlock>

                <div>
                    <UserName>Snoopka</UserName>
                </div>
            </AvatarBlock>

            <MobileDiv>
                <MobileImageBlock>
                    <HomeBorderIcon width="30" src={home} />
                </MobileImageBlock>

                <div>
                    <TitleName>Main Stream</TitleName>
                </div>
            </MobileDiv>

            <MobileDiv>
                <MobileImageBlock>
                    <img width="30" src={megaphone} />
                </MobileImageBlock>

                <div>
                    <TitleName>News</TitleName>
                </div>
            </MobileDiv>

            <MobileDiv>
                <MobileImageBlock>
                    <img width="30" src={profile} />
                </MobileImageBlock>

                <div>
                    <TitleName>Profile</TitleName>
                </div>
            </MobileDiv>

            <MobileDiv>
                <MobileImageBlock>
                    <img width="30" src={lessons} />
                </MobileImageBlock>

                <div>
                    <TitleName>Lessons</TitleName>
                </div>
            </MobileDiv>
        </MobileContainer>
    }
}

Answer 1

Так и анимируете...

codesandbox

import React from 'react';
import classNames from 'classnames';
import './styles.css';

const App = () => {
  const [
    navigationMenuVisibleState,
    setNavigationMenuVisibleState
  ] = React.useState(false);

  return (
    <React.Fragment>
      <button
        style={{
          position: 'fixed',
          top: '50%',
          left: '50%',
          transform: 'translate3d(-50%, -50%, 0)'
        }}
        onClick={() => {
          setNavigationMenuVisibleState(!navigationMenuVisibleState)
        }}
      >
        Toggle the navigation menu
      </button>

      <div
        className={classNames('navigation-menu', {
          visible: navigationMenuVisibleState
        })}
      >
        <ul>
          <li>1</li>
          <li>2</li>
          <li>3</li>
        </ul>
      </div>
    </React.Fragment>
  );
};

export default App;

.navigation-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 320px;
  height: 100%;
  transform: translate3d(-100%, 0, 0);
  transition: transform 0.3s ease-in-out;
  will-change: transform;
  z-index: 99;
  background-color: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.navigation-menu.visible {
  transform: translate3d(0, 0, 0);
}

БЛОГ НА HUSL

React - анимация меню

Ответы (1 шт):