如何使用ECMAScript切换2个类

我有两个CSS类。在元素的不透明度class-A中淡入的一个(使用CSS3关键帧(。另一个是将不透明度淡入0class-B(使用CSS3关键帧(。在纯ecmascript中有没有办法在这两个类之间切换？第一次单击时，将加载class-A。如果再次单击它，则加载Class-B。如果您第三次点击class-A加载等…

以下是我对切换类的知识范围，与点击事件处理有关。。。。

var anchors = document.querySelectorAll('a');
for (var i = 0, len = anchors.length; i < len; i++) {
anchors[i].addEventListener('click', function (e) {
e.preventDefault();
if (this.classList.contains('my-trigger')) {
document.querySelector('.what-i-am-fading-in-and-fading-out-on-clicks').classList.toggle('class-A');
}
}
};

当我第一次点击链接my-trigger时，很容易淡入元素。但我的最终目标是在元素上有一个很好的淡出过程，当我的链接被第二次或第四次点击时，等等…我该如何利用这一点？

我不知道我是否理解正确，但你可以添加一个if语句来查看不透明度是0还是1，然后添加类，一旦添加了类，你就不需要查找它。

您可以将#test的不透明度更改为1或0，它将相应地更改。

let test = document.getElementById("test");
let but = document.getElementById("but");
but.onclick = ()=>{
if(test.classList.contains("a")||test.classList.contains("b")){
test.classList.toggle("a");
test.classList.toggle("b"); 
}else{

if(window.getComputedStyle(test).getPropertyValue("opacity") == "0"){
test.classList.add("b")
}else{
test.classList.add("a")
}

}
}

#test{
width:100px;
height:25px;
background:black;
opacity:1;
}
#but{
width:50px;
background: lightgrey;
margin-top:20px;
}
.a{
opacity:0 !important;
transition:opacity 300ms;
}
.b{
opacity:1 !important;
transition:opacity 300ms;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grocery Bud</title>
<!-- font-awesome -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="test"></div>
<div id="but">Button</div>
</body>
<script src="app.js"></script>
</html>

我认为这是使用ES6(classList.thoggle(用Animation切换类的最简单方法

let toggleElement = document.getElementById("toggleElement");
let but = document.getElementById("btn"); 
but.onclick = ()=>{ 
toggleElement.classList.toggle('active');
}


#toggleElement{
width:150px;
height:25px;
background:Red;
opacity:1; 
padding:10px;
}

.ele{
opacity:0 !important;
transition:opacity 300ms;
}
.ele.active{
opacity:1 !important;
transition:opacity 300ms;
}


<button id="btn">Button</button>
<div id="toggleElement" class="ele" > Toggle CSS Class </div>

相关内容

最新更新

热门标签：