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或整个文档正文中

Answer 2

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

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

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

Answer 3

.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/

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

3 个答案: