Javascript 添加类名以操纵节点不起作用

因此，基本上我想删除一个div元素，当单击另一个元素（锚定）时，给它0高度值，并且我想给transition:height 4s，这样它可以在消失时设置动画

我的css如下所示：

.slides > div {
     width: 100%;
     height: 100vh;
     background-image: url('sdfsd.jpg');
     background-size: cover;
     background-position: center;
     transform: scale(1.14, 1.14);
     transition: transform 5000ms;
}

.erase {
    height: 0;
    transition: height 4s;
 }

下面是为元素提供类名的函数

redirectToHome = (e) => {
    e.preventDefault();
    for(let node of document.querySelectorAll('.slides > div')){
        node.classList.add('erase');
    }
    // console.log(document.querySelectorAll('.slides > div'))
}

我可以从浏览器检查类名是否添加到元素中，但不知何故，我没有看到类名的任何css属性。 *但是，修改可见性是可行的

.erase {
    visibility: hidden;
 }

---

您应该描述到父选择器的转换属性，如.slides>div或整个文档体中的转换属性。slides>div的优先级高于

。erase

。因此，将不应用在较高优先级选择器中已定义的高度和过渡特性

您可以通过以下方式解决此问题：

.erase {
    height: 0 !important;
    transition: height 4s !important;
 }

---

.slides>div

的定义比仅定义

.erase

更为强大，因此它将推翻

.erase

您需要将

.erase

规则嵌套到

.slides>中。erase

见下面的例子

.slides > div {
    width: 100%;
    height: 100vh;
    background-image: url('sdfsd.jpg');
    background-size: cover;
    background-position: center;
    transform: scale(1.14, 1.14);
    transition: transform 5000ms;
}

.slides > .erase {
    height: 0;
    transition: height 4s;
}

---

示例如下：

与

相比，
.slides>div
的定义更强。请删除
，然后尝试.slides>。删除仍不工作..哦，是的！它正在工作！谢谢你，艾德里安！！好吧，把它贴出来作为答案