如果在 javascript 中轻弹切换开关，则关闭 css 微调器答案

【问题标题】：turn off css spinner if toggle switch is flicked off in javascript如果在 javascript 中轻弹切换开关，则关闭 css 微调器
【发布时间】：2022-11-18 07:26:27
【问题描述】：

您好，我的页面上有一个切换开关和微调器。我希望微调器在拨动开关关闭时停止旋转或消失。我相信为此我需要某种 javascript，但我是新手。请协助为此编写关于如何根据 .switch 值执行微调器的 javascript。

.html 页面

 @keyframes spinner {
 0% {
 transform: translate3d(-50%, -50%, 0) rotate(0deg);
 }
  }
 100% {
 transform: translate3d(-50%, -50%, 0) rotate(360deg);
 }
.switch {
position: relative;
display: inline-block;
width: 55px;
height: 28px;
}
.spin::before {
 animation: 1.5s linear infinite spinner;  
 animation-play-state: inherit;   
 border: solid 5px #cfd0d1;  
 border-bottom-color: #1c87c9;   
 border-radius: 50%;   content: "";  
 height: 20px;   width: 20px;   
 position: absolute;   
 top: 26%;   left:
 35%;   
 transform: translate3d(-50%, -50%, 0);   
 will-change:
 transform; }

.switch {   position: relative;   display: inline-block;   width:
 55px;   height: 28px; }

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

<span class="slider round"></span>
<div class="spin"></div>

【问题讨论】：

已发布代码中的第一个 @keyframes spinner 块似乎缺少 }。

标签： javascript html css

【解决方案1】：

使用 JavaScript，您可以像这样删除一个元素：

const el = document.querySelector("div.spin"); // your css query here
el.parentElement.removeChild(el);

我发现隐藏它有时会更好（以防你需要稍后再次显示加载）：

const el = document.querySelector("div.spin"); // your css query here
el.style.display = "non"; // hide using CSS display

您希望将此代码放在输入的 onclick 处理程序上（我不相信您的代码中有）。如果它是一个按钮，你可以这样做：

<button onclick="const el = document.querySelector('div.spin');el.parentElement.removeChild(el);">Click to remove element</button>

有很多方法可以将 JavaScript 嵌入到您的 HTML 网站中；有关更多信息，我建议阅读MDN Docs。

【讨论】：