CODEWITHSUNDEEP
javascripthtmlcss
user10224240
user10224240

Reputation:

Sliding in and out div

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

Answers (1)

Aaron McGuire
Aaron McGuire

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

Related Questions