如何使用 ECMAScript 切换 2 类

Question

我有两个CSS类。一个在元素的不透明度 class-A 中淡出（使用 CSS3 个关键帧）。另一个将不透明度淡出到 0 class-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');
      }
    }
 };

当我第一次点击 link my-trigger 时，元素很容易淡入淡出。但我的最终目标是在元素上有一个很好的淡出过程，当我的 link 被点击 2 次或 4 次时，等等......我如何利用它？

Answer 1

我不知道我理解的对不对，但是你可以添加一个 if 语句来查看不透明度是 0 还是 1，然后添加 classes，一旦 class 是添加了你不需要寻找它。

您可以将#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>

Answer 2

我认为这是使用 ES6 (classList.toggle)

切换 class 与动画的最简单方法

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>

如何使用 ECMAScript 切换 2 类

How to toggle 2 classes with ECMAScript

ecmascript-5

ecmascript-6