使用 JavaScript 更改可见性时如何使用 transition/animation?
How to use transition/animation when changing visibility with JavaScript?
我希望下拉菜单使用 JavaScript 在单击时淡入淡出,但现在它只是快速出现和消失。
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 过渡仅适用于 ordinal/calculable 属性
您应该使用 opacity
而不是 visibility
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";
}
}
- 使用
data-*
attribute存储目标元素的选择器(ID)和class要切换的名称
即:data-toggle="#myDropdown:is-visible"
- 使用classList.toggle()切换class
- 在您的 CSS 中定义所需的过渡
- PS: 不要使用内联 JS
on*
处理程序——就像你希望不要使用内联 style
属性一样。 JS 应该只在一个地方,那就是你的 script
.
- 不要创建只做一件事的函数(即只切换一个元素的可见性状态)——而是创建一个可以重复用于无数元素的函数:
const toggle = (ev) => {
const EL_btn = ev.currentTarget;
const [target, className] = EL_btn.dataset.toggle.split(":");
const EL_target = document.querySelector(target);
EL_target.classList.toggle(className);
};
const ELS_toggle = document.querySelectorAll("[data-toggle]");
ELS_toggle.forEach(el => el.addEventListener("click", toggle));
.is-invisible {
transition: 0.6s;
opacity: 0;
visibility: hidden;
}
.is-visible {
opacity: 1;
visibility: visible;
}
<button data-toggle="#myDropdown:is-visible">TOGGLE</button>
<div id="myDropdown" class="is-invisible">ANY CONTENT YOU WANT TO SHOW</div>
我希望下拉菜单使用 JavaScript 在单击时淡入淡出,但现在它只是快速出现和消失。
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 过渡仅适用于 ordinal/calculable 属性
您应该使用 opacity
而不是 visibility
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";
}
}
- 使用
data-*
attribute存储目标元素的选择器(ID)和class要切换的名称
即:data-toggle="#myDropdown:is-visible"
- 使用classList.toggle()切换class
- 在您的 CSS 中定义所需的过渡
- PS: 不要使用内联 JS
on*
处理程序——就像你希望不要使用内联style
属性一样。 JS 应该只在一个地方,那就是你的script
. - 不要创建只做一件事的函数(即只切换一个元素的可见性状态)——而是创建一个可以重复用于无数元素的函数:
const toggle = (ev) => {
const EL_btn = ev.currentTarget;
const [target, className] = EL_btn.dataset.toggle.split(":");
const EL_target = document.querySelector(target);
EL_target.classList.toggle(className);
};
const ELS_toggle = document.querySelectorAll("[data-toggle]");
ELS_toggle.forEach(el => el.addEventListener("click", toggle));
.is-invisible {
transition: 0.6s;
opacity: 0;
visibility: hidden;
}
.is-visible {
opacity: 1;
visibility: visible;
}
<button data-toggle="#myDropdown:is-visible">TOGGLE</button>
<div id="myDropdown" class="is-invisible">ANY CONTENT YOU WANT TO SHOW</div>