Bootstrap Vue 动画下拉菜单答案

【问题标题】：Bootstrap Vue Animate DropdownsBootstrap Vue 动画下拉菜单
【发布时间】：2019-10-14 02:49:23
【问题描述】：

我正在使用 bootstrap vue 并尝试为下拉菜单设置动画/过渡。这被证明是相当困难的，因为他们不使用 v-if 或 v-show，因此过渡将无法进行。或者，因为如果您使用 v-if 下拉触发器将隐藏组件的工作方式。我在网上找不到任何专门用于引导 vue 的东西，但我觉得这不应该像事实证明的那样难。感谢您提供的任何帮助

<div id="app">
  <b-navbar type="dark" fixed>
    <b-navbar-nav class="ml-auto">

      <b-nav-item-dropdown text="Tools">
          <b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
          <b-dropdown-item to="/export"> Item 2</b-dropdown-item>
       </b-nav-item-dropdown>


        // This won't work as it hides the main dropdown trigger right form the start
        <b-nav-item-dropdown text="Tools" v-if="toggleDropdown">
           <b-dropdown-item to="/navItem1">Item 1</b-dropdown-item>
           <b-dropdown-item to="/export"> Item 2</b-dropdown-item>
        </b-nav-item-dropdown>
    </b-navbar-nav>
  </b-navbar>
</div>

<script>
export default {
  name: 'nav',
  data () {
    return { toggleDropdown: false }
  },
  mounted: function () {
    // I can listen for events here but I still can't trigger the transition
    this.$root.$on('bv::dropdown::show', bvEvent => {
      this.toggleDropdown = true
    })

    this.$root.$on('bv::dropdown::hide', bvEvent => {
      this.toggleDropdown = false
    })
  }
}
</script>

<style lang="scss">
   .navbar {
      .dropdown-menu {
          transform-origin: top;
          transition: transform 10s ease-in-out;;
       }
   }

  .dd-slide-enter,
  .dd-slide-leave-to { transform: scaleY(0); }

</style>

【问题讨论】：

标签： vue.js bootstrap-vue

【解决方案1】：

很难实现干净的上/下滑动动画，因为 BootstrapVue 使用 display:none/block 来隐藏/显示下拉菜单。您可以按照here 的说明操作元素的最大高度。

我向父元素添加了一个“动画”类，例如您的 b-navbar 以选择必须为哪个下拉菜单设置动画。然后我从下拉菜单的默认状态中删除了 display: none 并将其隐藏，将其最大高度和填充设置为 0，并将其边框设置为无。当您单击按钮时，下拉菜单会获得“显示”类，因此您可以给它一个不同于 0 的最大高度，正如我链接到您的答案中所解释的那样，您必须将其设置为高于实际高度下拉菜单，否则会被裁剪掉。

.animated {
    .dropdown-menu {
        overflow: hidden;
        display: block!important;
        max-height: 0!important;
        &:not(.show) {
            padding: 0;
            border: none;
        }
        &.show {
            transition: max-height 300ms ease-in-out;
            max-height: 500px!important; //this must have to be higher than the max height of the dropdown list
        }
    }
}

【讨论】：

【解决方案2】：

刚刚遇到同样的问题。

结束了前面的示例，但这个示例适用于上/下转换，并且不会与溢出混淆，以防您想添加三角形。

.dropdown-menu {
    border: 1px solid #ebeef5;
    box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.25);

    // Slide down transtion

    display: block !important;

    &:not(.show) {
        padding: 0px;
        border-width: 0px;
        border-color: transparent;
        box-shadow: none;

        transition: padding 1.3s ease, border-width 1.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    }

    > li {
        max-height: 0px;
        overflow: hidden;
        transition: max-height 0.3s ease;
    }

    &.show {
        > li {
            max-height: 100px;
        }
    }

    // Add chevron to top

    &[x-placement^="bottom"] {
        &::before {
            content:"";
            position: absolute;
            right: 11px;
            top: -5px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 0 5px 5px 5px;
            border-color: transparent transparent #fff transparent;
            z-index: 99999999;
        }
    }

    // Add chevron to bottom

    &[x-placement^="top"] {
        &::after {
            content:"";
            position: absolute;
            right: 11px;
            bottom: -5px;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 5px 0 5px;
            border-color: #fff transparent transparent transparent;
            z-index: 99999999;
        }
    }
}

【讨论】：