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

【问题标题】：adding a class name to manipulate the node does not work添加类名来操作节点不起作用
【发布时间】：2019-01-17 18:31:24
【问题描述】：

所以基本上我想通过在单击另一个元素（锚点）时给它 0 高度值来删除一个 div 元素，并且我想给 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 的定义比.erase 强，试试 .slides > .erase
还是不行..
jsfiddle.net/sa1ge208/11
哦，是的！这是工作！谢谢艾德里安！！
好的，将其发布为答案

标签： javascript html css dom css-transitions

【解决方案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/

【讨论】：

【解决方案2】：

您应该将转换属性描述为父选择器，例如 .slides > div 或整个文档正文

【讨论】：

【解决方案3】：

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

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

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

【讨论】：