如何在具有伪元素的类中添加和删除 CSS 代码？

Question

function toggle(){
  var button=document.querySelector('.toggle');
  var bar=document.querySelector('.slide');
  if(bar.className==='slide up'){
    bar.className='slide down';
  }else{
    bar.className='slide up';
   }
}

*{
  margin:0px;
  padding:0px;
  height:100%;
  width:100%;
}
.box{
  overflow:hidden;
  background-image: url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
  background-size: cover;
  background-position:center;
}
.slide{
  position: relative;
  left:39vw;
  
  width: 55vw;
  height: 75vh;
  background: red;
  
}
.slide:before {
  content: '';
  position:absolute;
  top:-3vh;
  width: 0px;
  height: 0px;
  
  border-left:27.5vw solid transparent;
  border-right:27.5vw solid transparent;
  
  border-bottom:3vh solid white;  
}
.slide.down{
 transform:translateY(100vh);
}
.slide.up{
  transform:translateY(25vh);
}
.slide{
  transition:transform 0.4s ease-out;
}

<div class='box'>
  <div class='slide up' onclick='toggle()'></div>
</div>

红色矩形顶部的白色三角形是用伪元素 :before 制成的。我想做的是当滑动标签向上时，白色三角形应该指向下方。为此，我想编写一个 JS 代码，该代码将向该类添加一个带有伪元素的变换 CSS，该伪元素将三角形向下平移其高度并旋转 180 度。

我在this developer blog 上找到了要添加的 JS 代码，但它不起作用，我不知道在标记关闭时如何删除该代码。

function toggle(){
  var button=document.querySelector('.toggle');
  var bar=document.querySelector('.slide');
  if(bar.className==='slide up'){
    bar.className='slide down';
//Here is where I need to add the line to delete CSS
  }else{
    bar.className='slide up';
//This is to add CSS
//3vh is the height of that white triangle
  document.styleSheets[0].addRule('.slight:before','transform:translateY(3vh) rotateX(180deg)');
   }
}

Answer 1

您可以将转换添加到 CSS 类中，然后简单地切换它。

CSS

.slide.up:before {
  transform: translateY(3vh) rotateX(180deg);
}

JS

var bar = document.querySelector('.slide')

function toggle() {
  var cl = bar.classList

  cl.toggle('down', cl.contains('up'))
  cl.toggle('up', !cl.contains('down'))
}

JSFiddle 演示：https://jsfiddle.net/htq8ouyn/2/

资源

• Element.classList - Web APIs | MDN