Bootstrap Vue Animate Dropdowns

Question

I am using bootstrap vue and am trying to animate/transition the drop downs. This is proving to be fairly difficult as they do not use v-if or v-show so the transition will not work. Alternatively because the way the components work if you use v-if the drop down trigger will be hidden. I can't find anything online to bootstrap vue specifically on this but I feel this shouldn't be as tough as it has turned out to be. thanks for any help you can give

<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>

score 0 · Answer 1 · answered May 28 '19 at 16:24

It's pretty hard to achieve a clean slide-up/down animation because BootstrapVue uses display:none/block to hide/show the dropdown menu. What you can do it's manipulate the max-height of the element as explained here.

I added an 'animated' class to the parent element, for example your b-navbar to select which dropdown has to be animated. Then i removed display: none from the default status of the dropdown and hidden it setting its max-height and padding to 0 and its border to none. When you click the button the dropdown gets the class 'show'so you can give it a max-height different than 0, as explained in the answer i've linked to you, you have to set it higher than the actual height of the dropdown menu otherwise it gets cropped out.

.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
        }
    }
}

Rob · Answer 2 · 2019-10-24T08:05:37.747

Just came across this same issue.

Ended up following with previous example, but this one works for both up/down transitions and doesn't mess with overflows in case you want to add triangles.

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

Bootstrap Vue Animate Dropdowns

2 Answers2