不确定在哪里为元素应用过渡 CSS [重复]答案

【问题标题】：Not sure where to apply transition CSS for element [duplicate]不确定在哪里为元素应用过渡 CSS [重复]
【发布时间】：2021-01-20 04:42:01
【问题描述】：

我认为这会很好而且很简单；但是，我似乎无法让它工作。我试图让一个 DIV 元素淡入和淡出，具体取决于是否选中了复选框，而不是瞬间出现和消失。

这是我的代码：

HTML -

<div id="logPad" name="logPad" class="buttonZ logPad" onclick="remfunc2();"></div>

<div class="logSlider">
  <input type="checkbox" name="logSlider" class="logSlider-checkbox"
    id="logSlider" tabindex="0" onclick="sliderJS();" />
  <label class="logSlider-label" for="logSlider">
    <span class="logSlider-inner"></span>
    <span class="logSlider-switch"></span>
  </label>
</div>

'logPad' 的 CSS-

.logPad {
  min-width: 225px;
  display: none;
  max-height: 200px;
  min-height: 15px;
  transition: 10s;
}

现在我不确定应该在哪里应用过渡，我最有可能通过 JavaScript 进行思考，所以我尝试了一些东西，但我仍在学习 JS，但并不擅长它。

这是我的 JS，用于在“复选框”切换上隐藏和显示 logPad div，切换已转换为滑块而不是复选框，这是通过 CSS 完成的，但我不确定这与我的相关性确保滑块的 CSS 不在 logPad div 的过渡位置。

function sliderJS() {
  var checkBox = document.getElementById("logSlider");
  if (checkBox.checked == true) {
    document.getElementById('logPad').style.display = "block";
  } else {
    document.getElementById('logPad').style.display = "none";
  }
}

请有人解释一下这将在哪里应用？类中的当前转换没有效果。

【问题讨论】：

将display 设置为none 会移除元素；如果你想让它过渡，你需要一个像opacity这样的属性从1变为0。这不会删除元素，只是让它不可见，所以如果你希望它在淡出后完全消失，你需要删除它在 setTimeout 回调中。
感谢@ChrisG，我已经改用 Opacity，现在效果很好。
关于你在下面的评论，我在上面的评论中告诉你如何解决这个问题:)
@ChrisG 我完全错过了！谢谢，我以前从未使用过 setTimeout，所以学习起来会很有趣，我知道它会在功能激活之前设置一个计时器，所以我试试看。
@ChrisG 在显示元素之前如何让显示再次设置为“阻止”？当然它不会淡入，因为 setTimeout 回调将显示设置为 none？

标签： javascript html css

【解决方案1】：

简答：你不能转换display。

你可以，但是转换opacity。

此外，最好使用 opacity: 0 的隐藏状态类，然后您可以执行以下操作：

document.getElementById('logPad').classList.toggle('hidden', !checkBox.checked);

【讨论】：

我没有意识到，太好了，谢谢。我现在使用不透明度并且我设法让它工作，唯一的事情是 div 在技术上仍然占用空间所以当它“隐藏”时页面不会像以前那样重新排列:(但这还不错！谢谢
是的，opacity 仍然保留该元素。另一方面，淡出并使其他内容跳跃也不是那么好。您可以考虑为height 或其他属性设置动画以逐渐隐藏元素。您的元素可以同时缩小或缩小+淡出。