Question

我有一个花哨的复选框，它不是那种花哨导致这么多滞后但我试图让它变得更便宜。

我这样做是为了让它的父div更加便宜而立即执行此操作，但将复选框留在那里约3秒钟。

继承人jsfiddle - http://jsfiddle.net/zpun567w/16/

我必须通过代码来陪伴它，这就是我如何让它消失：

document.getElementById("clickHide").addEventListener('click', function (){

document.getElementById("hide").style.visibility = 'hidden'; 

});

另外，只是为了澄清这是一个更大的项目的一部分，所以我不想通过将显示设置为无来使单个复选框消失。它需要具有可见性和优秀的整体div

Answer 1

对我而言，这肯定不是3秒，但你已经transition: .4s设置了你的元素。当然，您希望滑块仍然是动画的。要执行此操作，请设置您要转换的属性，因为默认设置是转换所有（不是您想要的）。

这样做，您将得到您期望的结果。

这是更新的代码。

＆＃13;

document.getElementById("clickHide").addEventListener('click', function (){
  document.getElementById("hide").style.visibility = 'hidden';
});

＆＃13;

body {
  background-color:red;
}
.switch input {
  display:none;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: background-color .4s; /* we're transitioning `background-color` here */
  transition: background-color .4s; /* and this */
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: transform .4s; /* we're transitioning `transform` here */
  transition: transform .4s; /* and here */
  border-radius: 50px;
}

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);
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

＆＃13;

<div id="hide">
  <label class="switch">
    <input type="checkbox" checked>
    <span class="slider round"></span>
  </label>
</div>

<button id="clickHide">
  click me
</button>

＆＃13;

隐藏复选框

1 个答案: