Javascript 滑入滑出div

我已经创建了一个div，它会在单击按钮时显示。然而，我不确定如何使它滑入滑出，而不是仅仅出现

下面是使用它的示例，单击左侧的第一张项目卡

document.getElementById（'project-1'）。addEventListener（“单击”，函数（）{
document.querySelector（'.side model'）.style.display=“flex”；
});
document.querySelector（'.close-side-model'）。addEventListener（“单击”，函数（）{
document.querySelector（'.side model'）.style.display=“无”；
});这里是一个基本的模型，我相信您正在尝试实现它，而不是使用
显示：无和
显示：flex我在Javascript中添加了一个简单的类切换，并使用css
transition
属性来控制幻灯片动画


const item=document.querySelectorAll（'.container item'）；
const sidebar=document.querySelectorAll（“.slide model”）；
项目.forEach（（i）=>{
i、 addEventListener（'单击'，（）=>{
边栏.forEach（（s）=>{
s、 移除（'slide-modal--active'）；
})
var modalClicked=i.dataset.modal；
var element=document.queryselectoral（“[data modal='”+modalClicked+“']”）1]
element.classList.toggle（'slide-model--active'）；
});
})
.container{
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.货柜物品{
弹性基准：50%；
高度：25vw；
背景：rgb（240240）；
利润率：0.10px
}
.滑动模态{
位置：固定；
宽度：25vw；
高度：100vw；
背景：rgb（200200）；
右：0；
排名：0；
转化：translateX（25vw）；
可见性：隐藏；
过渡：.8s缓解；
}
.幻灯片模式：第n个子项（2）{
背景：rgb（150150）；
}
.滑动模式-激活{
变换：translateX（0）；
能见度：可见；
}

检查此欢迎访问SO。请看一看。如果您不提供任何代码，我们将无法帮助您-请参阅如何创建。另外请阅读：谢谢你们的建议。现在我来研究一下。如果你想实际滑动，你可以把元素放在屏幕外，然后用JS慢慢改变它的位置。或者你也可以通过在宽度、高度或比例上使用简单的css转换来“假装”滑动，这样模态就太薄了，一开始看不见，然后展开。css方法更容易编码，但可能没有视觉吸引力。你知道有没有关于javascript选项的教程吗？嗨，Aaron，有没有一种方法可以将你创建的代码与上面包含的我的代码结合起来？我是javascript新手，不知道如何将以下内容应用到我的原始代码中。