添加类名来操作节点不起作用

Question

所以基本上我想通过在单击另一个元素(锚点(时给它 0 高度值来删除一个div 元素，我还想给出过渡：高度 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;
}

Answer 1

.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;
}

示例如下：http://jsfiddle.net/sa1ge208/11/

Answer 2

您应该描述父选择器的过渡属性，例如 .slides>div 或整个文档正文

Answer 3

.slides > div的优先级高于.erase。因此，不会应用已在较高优先级选择器中定义的高度和过渡属性。

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

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