Реагировать Bootstrap анимация перехода без реагирующих - bootstrap компонентов - PullRequest
Новая
       4

Реагировать Bootstrap анимация перехода без реагирующих - bootstrap компонентов

0 голосов
/ 04 марта 2020

Я пытаюсь воспроизвести внешний вид и поведение реагирующих элементов bootstrap, не используя их компоненты. Вместо этого я выясняю, какие классы добавляет каждый компонент к элементам DOM, и создаю свои собственные компоненты, используя классыа- 

<nav className='navbar navbar-expand-lg navbar-dark bg-dark'>
  <div className='container'>
    <span className='navbar-brand'>{title}</span>
    <button aria-controls='responsive-navbar-nav' type='button' aria-label='Toggle navigation' className='navbar-toggler collapsed'>
      <span className='navbar-toggler-icon' />
    </button>
    <div className='navbar-collapse collapse'>
      <div className='mr-auto navbar-nav'>
        <Link to='/' data-rb-event-key='/' className='nav-link'>
          Home
        </Link>
        <Link to='/about' data-rb-event-key='/about' className='nav-link'>
          About
        </Link>
        <Link to='/status' data-rb-event-key='/status' className='nav-link'>
          User Status
        </Link>
      </div>
      <div className='navbar-nav'>
        <Link className='nav-link' to='/register' data-rb-event-key='/register'>
          Register
        </Link>
        <Link className='nav-link' to='/login' data-rb-event-key='/login'>
          Log In
        </Link>
        <Link className='nav-link' to='/logout' data-rb-event-key='/logout'>
          Log Out
        </Link>
      </div>
    </div>
  </div>
</nav>

Теперь мой компонент выглядит точно так же, он также становится бургером, когда вы уменьшаете экран - точно так же, как оригинал.

Проблема в том, когда я хочу расширить бургер до показать ссылки - это не работает. Я заметил, что в оригинале, когда вы нажимаете на гамбургер, два реагирующих bootstrap компонента меняют классы.

Кнопка теряет класс 'collapsed', а div чуть ниже кнопки, сначала меняет свои классы до 'navbar-collapse collapsing', затем, когда он полностью расширился, он превращается в 'navbar-collapse collapse show'.

Я много пытался имитировать c поведение скольжения вниз, но лучшее, что я могу сделать, - это сделать меню мгновенным по клику (путем добавления / удаления классов). Я не могу понять анимацию перехода, чтобы она хорошо скользила вниз.

Есть ли простой способ добавить что-то в мои компоненты для перехода mimi c реагировать-начальные загрузки или мне нужно создать свой собственный анимация? Если последнее, то есть предложения по легкому переходу анимации?

...