使用显示块 CSS Javascript 获取模态淡入
Get modal fade in in with display block CSS Javascript
我正在努力让模态在单击按钮时动画化。模态窗口在隐藏时不得使用 space。所以我想在未显示时使用 display none 。当单击按钮时,模态需要淡入。现在我找到了一个我认为可以让它工作的解决方案。但它仍然不起作用。谁能告诉我为什么它不起作用?我如何让它工作?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h2>Animating from <code>display:none</code> to <code>display:block</code></h2>
<div id="box" class="box"></div>
<button>TOGGLE VISIBILITY</button>
</body>
<script src="script.js"></script>
</html>
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: all 2s linear;
display: none;
}
.show {
display: block;
}
.visuallyshow {
opacity: 0;
}
button {
display: block;
margin: 0 auto;
}
let box = document.getElementById('box'),
btn = document.querySelector('button');
btn.addEventListener('click', function () {
if (box.classList.contains('show')) {
box.classList.remove('show');
setTimeout(function () {
box.classList.remove('visuallyshow');
}, 20);
} else {
box.classList.add('visuallyshow');
box.addEventListener('transitionend', function (e) {
box.classList.add('show');
}
// , {
// capture: false,
// once: true,
// passive: false
// }
);
}
}, false);
.modal {
display: none;
opacity: 0;
transition: opacity: 1s;
}
.modal.show {
display: block;
opacity: 1;
}
如果您 ...classList.add('show')
到模式应该可以工作。
我认为你的不工作的原因是因为为了应用转换,它首先需要一个初始值,然后它才能知道要转换到什么。在上述情况下,您首先需要告诉它不透明度为 0,之后您可以实际将其“转换”为 1。
这是您需要做的:
- 该框最初应该有
opacity: 0
,.visuallyshow
class 应该将其更改为 1。
setTimeout
中的延迟应该是 2000,而不是 20。2 秒等于 2000 毫秒。
- 您需要调换添加和删除 classes 的顺序。显示框时,首先需要添加
display: block
,然后是opacity: 1
.
- 显示元素时,不应使用
transitionend
事件处理程序,而应使用延迟 1 毫秒的 setTimeout
。这将允许浏览器重新呈现布局,因此可以进行转换。
let box = document.getElementById('box'),
btn = document.querySelector('button');
btn.addEventListener('click', function () {
if (box.classList.contains('show')) {
box.classList.remove('visuallyshow');
setTimeout(function () {
box.classList.remove('show');
}, 2000);
} else {
box.classList.add('show');
setTimeout(() => {
box.classList.add('visuallyshow');
}, 1);
}
}, false);
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: opacity 2s linear;
display: none;
opacity: 0;
}
.show {
display: block;
}
.visuallyshow {
opacity: 1;
}
button {
display: block;
margin: 0 auto;
}
<h2>Animating from <code>display:none</code> to <code>display:block</code></h2>
<div id="box" class="box"></div>
<button>TOGGLE VISIBILITY</button>
问题是您的 .box 样式表默认没有 "opacity: 0;"
,这就是它不能顺利过渡的原因。除此之外,您的转换速度设置为 2000 毫秒,这非常慢。
我在这个 fiddle link 中提出了一个可行的解决方案:
https://jsfiddle.net/32oyu6wf/3/
我所做的是修改 .box 样式表以具有 "opacity: 0;"
并调整 javascript 事件监听器以相应地触发 类。
检查 fiddle 一点,您可以在您的项目中重复使用相同的方法。
let box = document.getElementById('box'),
btn = document.querySelector('button');
btn.addEventListener('click', function() {
if (box.style.display == "block") {
box.classList.remove("visuallyshow")
setTimeout(function() {
box.style.display = "none"
}, 210);
} else {
box.style.display = "block";
setTimeout(function() {
box.classList.add("visuallyshow")
}, 20);
}
}, false);
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: all 0.3s linear;
display: none;
opacity: 0;
}
.visuallyshow {
opacity: 1;
}
button {
display: block;
margin: 0 auto;
}
<h2>Animating from <code>display:none</code> to <code>display:block</code></h2>
<button>TOGGLE VISIBILITY</button>
<div id="box" class="box"></div>
我正在努力让模态在单击按钮时动画化。模态窗口在隐藏时不得使用 space。所以我想在未显示时使用 display none 。当单击按钮时,模态需要淡入。现在我找到了一个我认为可以让它工作的解决方案。但它仍然不起作用。谁能告诉我为什么它不起作用?我如何让它工作?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<h2>Animating from <code>display:none</code> to <code>display:block</code></h2>
<div id="box" class="box"></div>
<button>TOGGLE VISIBILITY</button>
</body>
<script src="script.js"></script>
</html>
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: all 2s linear;
display: none;
}
.show {
display: block;
}
.visuallyshow {
opacity: 0;
}
button {
display: block;
margin: 0 auto;
}
let box = document.getElementById('box'),
btn = document.querySelector('button');
btn.addEventListener('click', function () {
if (box.classList.contains('show')) {
box.classList.remove('show');
setTimeout(function () {
box.classList.remove('visuallyshow');
}, 20);
} else {
box.classList.add('visuallyshow');
box.addEventListener('transitionend', function (e) {
box.classList.add('show');
}
// , {
// capture: false,
// once: true,
// passive: false
// }
);
}
}, false);
.modal {
display: none;
opacity: 0;
transition: opacity: 1s;
}
.modal.show {
display: block;
opacity: 1;
}
如果您 ...classList.add('show')
到模式应该可以工作。
我认为你的不工作的原因是因为为了应用转换,它首先需要一个初始值,然后它才能知道要转换到什么。在上述情况下,您首先需要告诉它不透明度为 0,之后您可以实际将其“转换”为 1。
这是您需要做的:
- 该框最初应该有
opacity: 0
,.visuallyshow
class 应该将其更改为 1。 setTimeout
中的延迟应该是 2000,而不是 20。2 秒等于 2000 毫秒。- 您需要调换添加和删除 classes 的顺序。显示框时,首先需要添加
display: block
,然后是opacity: 1
. - 显示元素时,不应使用
transitionend
事件处理程序,而应使用延迟 1 毫秒的setTimeout
。这将允许浏览器重新呈现布局,因此可以进行转换。
let box = document.getElementById('box'),
btn = document.querySelector('button');
btn.addEventListener('click', function () {
if (box.classList.contains('show')) {
box.classList.remove('visuallyshow');
setTimeout(function () {
box.classList.remove('show');
}, 2000);
} else {
box.classList.add('show');
setTimeout(() => {
box.classList.add('visuallyshow');
}, 1);
}
}, false);
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: opacity 2s linear;
display: none;
opacity: 0;
}
.show {
display: block;
}
.visuallyshow {
opacity: 1;
}
button {
display: block;
margin: 0 auto;
}
<h2>Animating from <code>display:none</code> to <code>display:block</code></h2>
<div id="box" class="box"></div>
<button>TOGGLE VISIBILITY</button>
问题是您的 .box 样式表默认没有 "opacity: 0;"
,这就是它不能顺利过渡的原因。除此之外,您的转换速度设置为 2000 毫秒,这非常慢。
我在这个 fiddle link 中提出了一个可行的解决方案: https://jsfiddle.net/32oyu6wf/3/
我所做的是修改 .box 样式表以具有 "opacity: 0;"
并调整 javascript 事件监听器以相应地触发 类。
检查 fiddle 一点,您可以在您的项目中重复使用相同的方法。
let box = document.getElementById('box'),
btn = document.querySelector('button');
btn.addEventListener('click', function() {
if (box.style.display == "block") {
box.classList.remove("visuallyshow")
setTimeout(function() {
box.style.display = "none"
}, 210);
} else {
box.style.display = "block";
setTimeout(function() {
box.classList.add("visuallyshow")
}, 20);
}
}, false);
.box {
background: goldenrod;
width: 300px;
height: 300px;
margin: 30px auto;
transition: all 0.3s linear;
display: none;
opacity: 0;
}
.visuallyshow {
opacity: 1;
}
button {
display: block;
margin: 0 auto;
}
<h2>Animating from <code>display:none</code> to <code>display:block</code></h2>
<button>TOGGLE VISIBILITY</button>
<div id="box" class="box"></div>