Question

我有一个下拉菜单，可以使用Javascript进行切换。点击后，下拉列表打开（显示：无->显示：阻止）

现在，我想添加一个过渡，因此下拉菜单看起来更加平滑。我尝试了多种方法，但没有任何变化。有小费吗？：）

输入代码：https://codepen.io/pkl_9876/pen/vzOEPj

function ToggleDropdownAdmin() {
    document.getElementById("Dropdown_Admin").classList.toggle("js_show"),
    document.getElementById("DropdownRotate_Admin").classList.toggle("js_rotate"),
    document.getElementById("DropdownBtn_Admin").classList.toggle("js_color");
}

function ToggleDropdownUsers() {
    document.getElementById("Dropdown_Users").classList.toggle("js_show"),
    document.getElementById("DropdownRotate_Users").classList.toggle("js_rotate"),
    document.getElementById("DropdownBtn_Users").classList.toggle("js_color");
}

function ToggleDropdownHome() {
    document.getElementById("DropdownBtn_Home").classList.toggle("js_color");
}

.list-unstyled,
.list-unstyled > li > a {
	list-style-type: none;
	text-decoration: none;
}


/** MENUEAREA **/

#MenueArea {
	float: right;
	width: 30%;
	height: 100%;
	padding: 0px;
	background-color: #DC0000;
}

.spacer { height: 80px; }


/** NAVIGATION LIST **/

.mainmenue>li>a {
	position: relative;
	display: block;
	padding: 8px 20px;
	margin: 0;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
}

.menueicon {
	width: 20px;
	color: #fff;
	margin-right: 15px;
}

.rotate-icon {
	position: absolute;
	top: 8px;
	right: 20px;
}

.submenue {
	display: none;
	padding: 8px 0px 8px 80px;
	margin: 0;
}

.submenue > li > a {
	display: block;
	padding: 3px 0;
	margin: 0;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}

.submenue > li > a:hover { color: #000; }
.js_show { display: block; }

.js_rotate {
	transform: rotate(180deg);
	-webkit-transition-duration: 0.5s;
	/* Safari */
	transition-duration: 0.5s;
}

.js_color { background-color: #000; }


/** RIPPLE EFFECT **/

.ripple {
	background-position: center;
	transition: background 0.8s;
}

.ripple:hover {
	background: #000 radial-gradient(circle, transparent 1%, #000 1%) center/15000%;
}

.ripple:active {
	background-color: #444;
	background-size: 100%;
	transition: background 0s;
}

<!-- MENUEAREA -->
<aside id="MenueArea">               
    <ul class="mainmenue list-unstyled">
        <li><a href="#" onclick="ToggleDropdownAdmin()" id="DropdownBtn_Admin" class="ripple"><i class="menueicon fas fa-cogs"></i> Main 1<i id="DropdownRotate_Admin" class="rotate-icon fa fa-angle-down"></i></a>

            <ul id="Dropdown_Admin" class="submenue list-unstyled dropdown-content">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
                <li><a href="#">Sub 4</a></li>
                <li><a href="#">Sub 5</a></li>
            </ul>

        </li>

        <li><a href="#" onclick="ToggleDropdownUsers()" id="DropdownBtn_Users" class="ripple"><i class="menueicon fas fa-users"></i> Main 2<i id="DropdownRotate_Users" class="rotate-icon fa fa-angle-down"></i></a>

            <ul id="Dropdown_Users" class="submenue list-unstyled dropdown-content">
                <li><a href="#">Sub 1</a></li>
                <li><a href="#">Sub 2</a></li>
                <li><a href="#">Sub 3</a></li>
            </ul>

        </li>

        <li><a href="#" onclick="ToggleDropdownHome()" id="DropdownBtn_Home" class="ripple"><i class="menueicon fas fa-home"></i> Main 3</a></li>
    </ul>
    <!-- END NAVIGATION LIST -->    

</aside>

Answer 1

您不能从display: none;过渡到display: block;

如果您使用纯香草js，则可以尝试类似的方法。

.submenue {
    padding: 8px 0px 8px 80px;
    margin: 0;
  visibility: hidden;
  opacity: 0;
  max-height: 0;
  transition: all .4s;
}
.js_show {
  max-height: 500px;
  opacity: 1;
  visibility: visible;
}

或者，如果您包含 jQuery -您可以使用slideDown()函数。

在下拉菜单上添加过渡

1 个答案: