0

У меня есть мобильный меню, 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>
    }
}

1 ответ 1

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);
}

2
  • Спасибо но мне нужно чтобы анимация произошла сверху вниз примерно так codepen.io/mutedblues/pen/MmPNPG
    – Synchro
    22 дек 2020 в 14:27
  • @Synchro, ну дак сделайте, в чем сложность? Я показал пример, только меню открывается слева-направо, сделайте сверху-вниз
    – meine
    22 дек 2020 в 15:14

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.