如何在Boostrap 4中使用VUE JS过渡的Navbar的下拉菜单中添加幻灯片过渡

Question

我正在尝试使用Vue Transition上下添加Bootstrap 4下拉菜单上的滑动。

过渡不起作用

我尝试使用过渡元素，但动画不起作用。

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

下拉菜单应滑入并滑出

Answer 1

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变量。您可以通过收听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用于下拉菜单的位置。