Question

我正在尝试使用vue过渡在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仅在某些情况下会检测并应用过渡。请阅读Transitioning Single Elements/Components。因此，在这种情况下，我认为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>

然后，当Bootstrap显示和隐藏下拉菜单时，您必须触发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
})

Live Example

注意：在本示例中，我使用margin-top而不是transform来制作动画，因为Bootstrap已被top和transform用作下拉菜单的位置。

如何使用Vue JS Transition在Boostrap 4中的导航栏的下拉菜单中添加幻灯片过渡

1 个答案: