Question

我正在使用Bootstrap Vue，并试图为下拉菜单设置动画/过渡。事实证明，这很困难，因为他们不使用v-if或v-show，因此过渡将无法进行。另一种可能是因为使用v-如果下拉触发器将隐藏组件的工作方式。我在网上找不到任何东西可以专门用来引导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>

Answer 1

要获得清晰的上/下动画非常困难，因为BootstrapVue使用display：none / block来隐藏/显示下拉菜单。您可以按照here的说明操作元素的最大高度。

我在父元素中添加了“动画”类，例如，您的b-navbar选择必须对哪个下拉列表进行动画处理。然后，我从下拉菜单的默认状态中删除了显示内容：none，并将其设置为max-height并将其padding设置为0，并将其边框设置为none，将其隐藏。当您单击按钮时，下拉菜单将显示“显示”类，因此您可以给它一个不同于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
        }
    }
}

Answer 2

只是遇到了同样的问题。

最后跟随上一个示例，但是此示例适用于上/下过渡，并且在您要添加三角形的情况下也不会造成溢出。

<script>
        if ("WebSocket" in window) {

            var ws = new WebSocket('ws://192.168.33.1:5000');
            var variableSpan = document.getElementById('variable');

            ws.onmessage = function (event) {
                var message = JSON.parse(event.data);
                console.log(message);
                jQuery('#variable').empty();

                $(function () {
                    $.get(message.variable, function (data) {
                        $("#variable").append(data);
                    });
                });

                setTimeout(function () {
                    window.location.reload(); // you can pass true to reload function to ignore the client cache and reload from the server
                }, 10000);
            }
        }
</script>

Bootstrap Vue动画下拉列表

2 个答案: