代码之家 › 专栏 › 技术社区 › 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;
 }

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前