Bootstrap Vue Анимация выпадающих - PullRequest
Новая
       6

Bootstrap Vue Анимация выпадающих

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

Я использую bootstrap vue и пытаюсь анимировать / перевести выпадающие списки.Это оказывается довольно сложным, поскольку они не используют v-if или v-show, поэтому переход не будет работать.В качестве альтернативы, потому что, как работают компоненты, если вы используете v-if, раскрывающийся триггер будет скрыт.Я не могу найти в Интернете ничего, что могло бы привести к начальной загрузке, но я чувствую, что это не должно быть так сложно, как оказалось.спасибо за любую помощь, которую вы можете оказать 

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

1 Ответ

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

Довольно сложно добиться чистой анимации скольжения вверх / вниз, потому что BootstrapVue использует display: none / block, чтобы скрыть / показать выпадающее меню. То, что вы можете сделать, это манипулировать максимальной высотой элемента, как объяснено здесь .

Я добавил «анимированный» класс в родительский элемент, например, ваш b-navbar, чтобы выбрать, какой выпадающий список должен быть анимирован. Затем я удалил display: none из стандартного состояния раскрывающегося списка и скрыл его, установив его max-height и padding равным 0, а границу - none. Когда вы нажимаете кнопку, раскрывающийся список получает класс 'show'so', вы можете присвоить ему максимальную высоту, отличную от 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
        }
    }
}
...