javascript - 使用 JavaScript 更改可见性时如何使用过渡/动画?
问题描述
我希望下拉菜单使用JavaScript淡入和淡出onclick,但现在它只是快速出现和消失。
function toggleDropdown() {
var x = document.getElementById("myDropdown");
if (x.style.visibility === "visible") {
x.style.visibility = "hidden";
} else {
x.style.visibility = "visible";
}
}
#myDropdown{
visibility: hidden;
// -webkit-animation: fadeinout 4s linear forwards;
// animation: fadeinout 4s linear forwards;
transition: visibility 1s linear 300ms, visibility 300ms;
}
<div class="dropdown" id="dropdown">
<button onclick="toggleDropdown()">Choose connection</button>
<div id="myDropdown">
<img src="images/searchicon.png" alt="">
<input type="text" placeholder="">
<a href="">Base</a>
<a href="#blog">Blog</a>
</div>
</div>
解决方案
编辑:修复可见性
function toggleDropdown() {
var x = document.getElementById("myDropdown");
if (x.style.opacity === "1") {
x.style.opacity = "0";
x.style.visibility = "hidden";
}
else {
x.style.opacity = "1";
x.style.visibility = "visible";
}
}
#dropdown {
height:20px;
}
#myDropdown {
visibility:hidden;
opacity:0;
transition:visibility 0.3s linear,opacity 0.3s linear;
}
<div class="dropdown" id="dropdown">
<!-- <a href="#">Open Menu</a> -->
<button onclick="toggleDropdown()">Choose connection</button>
<div id="myDropdown">
<img src="images/searchicon.png" alt="">
<input type="text" placeholder="">
<a href="">Base</a>
<a href="#blog">Blog</a>
</div>
</div>
CSS 转换仅适用于序数/可计算属性
而不是visibility
,您应该使用opacity
css
#myDropdown{
opacity: 0;
transition: opacity 1s linear 300ms, opacity 300ms;
}
js
function toggleDropdown() {
var x = document.getElementById("myDropdown");
if (x.style.opacity === "1") {
x.style.opacity = "0";
}
else {
x.style.opacity = "1";
}
}
推荐阅读
- asp.net - .Net 自定义服务无法启动
- arrays - 变量未定义导致“找不到具有给定 ID 的项目...”
- docker - 如何使用 docker-compose 挂载指向 Docker 映像中同一位置的多个 NFS 挂载
- html - 计数器在 HTML/CSS 中不断重置
- c++ - 为什么我的两个线程之一永远不会获得互斥锁?
- android - 如何在android中重新加载数据后更新UI
- javascript - Jest 拒绝解析 JSX,尽管 tsconfig 包含 `jsx` 选项
- python - 列出德语中的词尾辅音簇
- typescript - TypeORM findDescendants 产生意外结果(它返回自身)
- excel - 使用 XML 引用 Excel 电子表格