Как добавить слайд-переход в выпадающее меню панели навигации в boostrap 4 с помощью vue js transition - PullRequest
Новая
       11

Как добавить слайд-переход в выпадающее меню панели навигации в boostrap 4 с помощью vue js transition

0 голосов
/ 13 мая 2019

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

Переход не работает

Я пытался использовать элемент перехода, но анимацияне работает. 

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         For Individuals
        </a>
        <transition name="list">
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Income Tax Return</a>
          <a class="dropdown-item" href="#">TDS</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Legal Services</a>
        </div>
         </transition>
      </li>

.list-enter {
  opacity: 0;
}
.list-enter-active {
  animation: slide-in .5s ease-out forwards;
}
.list-leave-to, .list-leave-active {
  opacity: 0;
  animation: slide-out .5s ease-out forwards;
}
@keyframes slide-in {
  from { 
    transform: translateY(20px);   
}
to {
  transform: translateY(0);
}
}
@keyframes slide-out {
  from { 
    transform: translateY(0);
}
to {
  transform: translateY(20px);
}
}

Раскрывающееся меню должно скользить и выдвигаться

1 Ответ

1 голос
/ 13 мая 2019

Vue будет обнаруживать и применять переход только для некоторых условий. Пожалуйста, прочитайте Переход отдельных элементов / компонентов . Поэтому в этом случае я думаю, v-show - наш лучший выбор.

Так что ваш шаблон должен выглядеть примерно так: 

<div id="app">
  <div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <transition name="menu">
      <div class="dropdown-menu" v-show="show">
        <a class="dropdown-item">Action</a>
        <a class="dropdown-item">Another action</a>
        <a class="dropdown-item">Something else here</a>
      </div>
    </transition>
  </div>
</div>

Затем вы должны активировать переменную show, когда Bootstrap показывает и скрывает выпадающий список. Вы можете сделать это, прослушав show.bs.dropdown и hide.bs.dropdown события: 

let dropdown = $(this.$el).find('.dropdown')
let menu = $(this.$el).find('.dropdown-menu')

dropdown.on('show.bs.dropdown', () => {
  this.show = true
})

dropdown.on('hide.bs.dropdown', () => {
  menu.css('display', 'block') // This prevent element hide before animation
  this.show = false
})

Живой пример

Примечание. В этом примере я использую margin-top для создания анимации вместо transform, поскольку Bootstrap уже используется top и transform для позиции раскрывающегося меню.

...