CSS动画从高度100%到0%fadeOut

const blackBg = document.getElementById("content__blackbg-id");
function displayBlock(){
blackBg.style.animation ="fadein 2s";
blackBg.style.height = "100%";
}
function displayNone(){

blackBg.style.animation = ""
blackBg.style.animation ="fadeout 2s";
blackBg.style.height = "";
}
const sideBar = document.getElementById("mySidebar");
function openNav() {
sideBar.style.width = "25%";
displayBlock();
}
function closeNav() {
sideBar.style.width = "0%";
displayNone();
}

.contenedor{
display:grid;
grid-template-rows: repeat(4, 1fr);
grid-template-columns: 3fr 1fr;
width: 100%;
height: 100%;
overflow: auto;
}

/*MAIN MENU*/
.main-menu{
padding: 2rem;
grid-row: 2 / 3;
grid-column: 1 / 3;
position: sticky;
top:0%;
text-align: center;
font-size: 1.6rem;
background:linear-gradient(to right, #19BAF6, #10DCEC , #1BDFDF, #17E7BE, #00FFD4);
}

/* COLLAPSIBLE MENU */
.sidebar{
position: fixed;
z-index: 2;
height: 100%;
width: 0%;
font-size: 1.5rem;
transition: .5s;
overflow: hidden;
color: #000;
text-align: center;
box-shadow: 10px 0px 20px #000;
}

.sidebar__closebtn{
position: absolute;
top: 0rem;
right: 0rem;
font-size: 4rem;
color: #fff;
margin: 2rem;
z-index: 2;
}

@keyframes fadein{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes fadeout{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
.content__blackbg{
grid-row: 1 / 5;
grid-column: 1 / 3;
position: relative;
z-index: 1;
background: #0008;
display: block;
height: 0%;
}

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="contenedor">
<nav class="main-menu">
<ul class="main-menu__ul">
<li class="main-menu__li"><a class="main-menu__a" href="#" onclick="openNav()">TU CUENTA &#9776;</li>
</li>
</ul>
</nav>
<div id="mySidebar" class="sidebar">
<a href="#" class="sidebar__closebtn" onclick="closeNav()">&times;</a>
</div>
<div id = "content__blackbg-id" class="content__blackbg">
</div>
</div>
</body>
</html>

我有一个div，它有height:0%;。单击某个按钮时，div将变为高度100%，动画将变淡。我让它在0%到100%的高度范围内工作，但当我再次单击同一按钮时，div必须更改为高度0%，并使用渐变动画。这个从100%到0%的动画不起作用。

这是css，具有Div和动画的风格

.content__blackbg{
grid-row: 1 / 5;
grid-column: 1 / 3;
position: relative;
z-index: 1;
background: #0008;
display: block;
height: 0%;
}

@keyframes fadein{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
@keyframes fadeout{
from{
opacity: 1;
}
to{
opacity: 0;
}
}

现在使用Javascript，我将高度和动画添加到Div

const blackBg = document.getElementById("content__blackbg-id");
*When clicking on the button*
blackBg.style.animation ="fadein 2s";
blackBg.style.height = "100%";
*When clicking again*
blackBg.style.animation = ""
blackBg.style.animation ="fadeout 2s";
blackBg.style.height = "";

您可以通过使用过渡而不是关键帧来尝试类似的操作。使用关键帧的问题是它们用于定义动画，而不是状态更改。您看到的是动画正在发生，但CSS属性仅针对动画的持续时间进行调整。

编辑：在我创建这个之后，你发布了更多的代码，但无论如何，你都应该能够将它应用于你的代码。

const blackBg = document.getElementById("content__blackbg-id");
const animationTrigger = document.getElementById("animationTrigger");
let blackBgVisible = true;
animationTrigger.onclick = event => {
if (blackBgVisible) {
runFadeOut();
} else {
runFadeIn();
}
blackBgVisible = !blackBgVisible;
};
function runFadeIn() {
blackBg.classList.replace("fadeOut", "fadeIn");
}
function runFadeOut() {
blackBg.classList.replace("fadeIn", "fadeOut");
}

.content__blackbg {
grid-row: 1 / 5;
grid-column: 1 / 3;
position: relative;
z-index: 1;
background: #0008;
display: block;
}
.fadeIn {
height: 20px;
opacity: 1;
transition: opacity 2s;
}
.fadeOut {
height: 0;
opacity: 0;
transition: opacity 1s;
}

<div id="content__blackbg-id" class="content__blackbg fadeIn">Placeholder</div>
<div align="center">
<button id="animationTrigger">Click</button>
</div>

相关内容

最新更新

热门标签：