Question

我创建了一个div，该div在单击按钮时出现。但是，我不确定如何使其滑入和滑出，而不仅仅是显示。

这里是使用示例，请单击左侧的第一个项目卡。 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";
});

这是我当前用于显示和隐藏div的代码。

Answer 1

这是我相信您要实现的基本模型，而不是使用display:none;和display:flex;，我在Javascript中添加了一个简单的类切换并使用了css {{1 }}属性来控制幻灯片动画。

transition

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

1 个答案: