如何使用ECMAScript

问题描述

我有两个CSS类。一种淡入元素的不透明度class-A（使用CSS3关键帧）。另一个使不透明度逐渐变回0 class-B（使用CSS3关键帧）。纯电子书中是否有办法在这两个类之间切换？首次单击时，将加载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.toggle）

通过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>

ecmascript-5 ecmascript-6