代码之家 › 专栏 › 技术社区 › Jay Jeong

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

css-transitions dom css html javascript

Jay Jeong · 技术社区 · 6 年前

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

3 回复 | 直到 6 年前

Eydrian 6 年前

这个 .slides > div 比仅仅 .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/

Simon Pasku 6 年前

您应该描述到父选择器的转换属性,如for.slides>div或在整个文档正文中

Willem van der Veen 6 年前

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

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

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

推荐文章

Ancross · 为什么我的小CSS动画不会触发?

2 年前

Jorge · :before和:after伪元素以接收过渡效果

7 年前

Arsalan Khattak · 线性渐变过渡

7 年前

Albert qerimi · 将鼠标悬停在具有CSS变换比例的div上后添加动画

7 年前

Paul · 悬停时变换比例不缩放

7 年前

Willem van der Veen · CSS转换结合JS clickEvent

7 年前

Shanmugaraja_K · 在切换按钮中添加动画

7 年前

klode · 使用伪元素更改css转换类

7 年前

SmallTown NE · 为什么带转换的转换会导致整个页面重新绘制?

7 年前

Run · 如何使用动画限制每行的项目?

7 年前