Question

下拉菜单在bootstrap（4.0）中的原生方式不是动画的。如何在导航栏折叠时“滑动”打开它？

值得注意的是下拉列表在导航栏中。见下面的代码; https://www.codeply.com/go/JKj5onR3ug

<xsl:template match="value">
   <xsl:value-of select="replace(., '([^A-Z])([A-Z])', '$1 $2')"/>
</xsl:template>

Answer 1

最简单的方法是使用＆＃34; collapse＆＃34;切换它而不是＆＃34;下拉＆＃34;。然后你只需要一点CSS来确保它在collapsing动画处于活动状态时显示。另请注意，position-relative上设置了dropdown-menu。

.dropdown-menu.collapsing {
    display:block;
}

Try it on Codeply

＆＃34;感谢Popper.js定位了下拉菜单（除非是它们包含在导航栏中。＆＃34;

因为dropdowns inside the Navbar are positioned differently这是使用标准按钮下拉列表的另一个示例：https://www.codeply.com/go/vJhVEh9Okd

另一种方法是使用Bootstrap 3.x dropdown animation techniques之一。

Answer 2

以下是我使用transform: scale用纯CSS制作下拉动画的方法：

SCSS样式

.dropdown {
    .dropdown-menu {
        transition: all 0.5s;
        overflow: hidden;
        transform-origin: top center;
        transform: scale(1,0);
        display: block;
    }
    &:hover {
        .dropdown-menu {
            transform: scale(1);
        }
    }
}

在Codepen上查看演示

Answer 3

您必须覆盖css以获取下拉列表。使用此css。

.dropdown-menu {
    display: block;
}

.navbar-nav .dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s;
}

.navbar-nav .dropdown-menu.show {
    max-height: 500px;
}

Answer 4

尝试使用此代码：）

            .dropdown-menu {
                float: none;
                position: static;
                padding: 0;
                display: block;
                &.show{
                    max-height: 500px;

                }
            }

            .dropdown-menu {
                max-height: 0;
                overflow: hidden;
                transition: max-height 0.5s;
            }

Animate下拉菜单Bootstrap 4

4 个答案: