I want to make block appear with animation from top to normal position. I thought it's possible to do with after selector.
So, I want to click on some element and show another element with animation.
Here is the code for now.
<!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">
<title>Document</title>
<style>
.title{
padding: 20px 20px;
background-color: aqua;
width: 50px;
height: 200px;
}
.added-content{
display: none;
background-color: black;
width: 50px;
height: 200px;
}
.added-content--active{
display: block;
}
</style>
</head>
<body>
<div class="title">
some title
</div>
<div class="added-content">
addon
</div>
<script>
const title=document.querySelector('.title');
const contenAdded=document.querySelector('.added-content');
title.addEventListener('click',()=>{
contenAdded.classList.toggle('added-content--active');
})
</script>
</body>
</html>Here is the link to code Sandbox: https://codesandbox.io/s/agitated-davinci-1dqujt?file=/index.html
Is there any way to show the block with animation, so it would look beautiful? Thank you in advance.
You can use opacity and visibility instead of display
.added-content {
background-color: black;
width: 50px;
height: 200px;
visibility: hidden;
opacity: 0;
transition: all 0.5s;
}
.added-content--active {
visibility: visible;
opacity: 1;
}
<!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" />
<title>Document</title>
<style>
.title {
padding: 20px 20px;
background-color: aqua;
width: 50px;
height: 200px;
}
.added-content {
background-color: black;
width: 50px;
height: 200px;
visibility: hidden;
opacity: 0;
transition: all 0.5s;
}
.added-content--active {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<div class="title">
some title
</div>
<div class="added-content">
addon
</div>
<script>
const title = document.querySelector(".title");
const contenAdded = document.querySelector(".added-content");
title.addEventListener("click", () => {
contenAdded.classList.toggle("added-content--active");
});
</script>
</body>
</html>With keyframes:
const title = document.querySelector(".title");
const contenAdded = document.querySelector(".added-content");
title.addEventListener("click", () => {
contenAdded.classList.toggle("added-content--active");
});.title {
padding: 20px 20px;
background-color: aqua;
width: 50px;
height: 200px;
position: relative;
z-index: 2;
}
.added-content {
display: none;
background-color: black;
width: 50px;
height: 200px;
position: relative;
top: 0;
}
.added-content--active {
display: block;
animation: slideup 0.5s;
}
@keyframes slideup {
from {
top: -100px;
}
to {
top: 0;
}
}<div class="title">some title</div>
<div class="added-content">addon</div>