Reputation:
I have created a div that appears on the click of the button. However, I'm unsure how to make it slide in and out, rather than just appear.
Here is the example of where it's been used, click the first project card on the left. maxmizemedia.co.uk
document.getElementById('project-1').addEventListener("click", function() {
document.querySelector('.side-modal').style.display = "flex";
});
document.querySelector('.close-side-modal').addEventListener("click", function() {
document.querySelector('.side-modal').style.display = "none";
});
Here is the code I'm currently using to display and hide the div.
Upvotes: 2
Views: 93
Reputation: 1255
Here is a basic mock-up of what i believe you are trying to achieve rather than using display:none;
and display:flex;
i've added a simple class toggle in Javascript and used the css transition
property to control the slide animation.
const item = document.querySelectorAll('.container-item');
const sidebar = document.querySelectorAll('.slide-modal');
item.forEach((i)=>{
i.addEventListener('click',()=>{
sidebar.forEach((s)=>{
s.classList.remove('slide-modal--active');
})
var modalClicked = i.dataset.modal;
var element = document.querySelectorAll("[data-modal='"+ modalClicked +"']")[1]
element.classList.toggle('slide-modal--active');
});
})
.container{
width:100vw;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
.container-item{
flex-basis:50%;
height:25vw;
background:rgb(240,240,240);
margin:0 10px
}
.slide-modal{
position:fixed;
width:25vw;
height:100vw;
background:rgb(200,200,200);
right:0;
top:0;
transform:translateX(25vw);
visibility:hidden;
transition:.8s ease;
}
.slide-modal:nth-child(2){
background:rgb(150,150,150);
}
.slide-modal--active{
transform:translateX(0);
visibility:visible;
}
<div class='container'>
<div data-modal='1' class='container-item'></div>
<div data-modal='2' class='container-item'></div>
</div>
<div data-modal='1' class='slide-modal'>
</div>
<div data-modal='2' class='slide-modal'>
</div>
Upvotes: 1