Javascript 隐藏带有过渡的图元，从中心开始，而不是从0开始

我有一个视频元素，当我点击一个元素时，视频逐渐隐藏，我修改每个元素的高度属性和宽度为0

但是当动画完成时，视频隐藏在左侧0和顶部0，但是我想在中间完成这个动画，你有什么想法吗

请检查我的密码

constdiv=document.querySelector（'div'）；
window.addEventListener（'click'，（）=>{
div.style.width='0'
div.style.height='0'
})

div{
宽度：150px；
高度：150像素；
背景颜色：蓝色；
过渡：缓进缓出；
}

---

您可以使用css属性缩放到0，然后应用JS函数将其隐藏。只需将类“scale-to-0”添加到视频元素中，然后将其隐藏

div.scale-to-0  {
    -ms-transform: scale(0, 0); 
    -webkit-transform: scale(0, 0); 
    transform: scale(0, 0);
}

---

您是否尝试了

margin 0 auto

constdiv=document.querySelector（'div'）；
window.addEventListener（'click'，（）=>{
div.style.width='0'
div.style.height='0'
})

div{
宽度：150px；
高度：150像素；
背景颜色：蓝色；
过渡：缓进缓出；
保证金：0自动；
}

---

如果在div上设置

边距：0 auto

，则在减小宽度的同时，它应保持居中。或者，您可以使用flex box将div定位到中心。您可以使用

div.style.transform='scale（0）

，并且，如果我的元素占我宽度的100%？我不明白，我在单击我的元素时在元素上应用了这个类，我就应用了一个类列表。删除（'scale-to-0'）对吗？你也应该在样式表中添加css。你的元素是屏幕的全宽和全高吗？没关系，我使用上面的解决方案。呜，一个仇恨者刚刚通过了考试，他把分数记了下来……我不知道为什么，但没关系，伙计：）