如何进行完全删除 div 的转换，而不仅仅是可见性？

Question

我如何做到这一点，以便当您将鼠标悬停时，原始 div 完全消失，而不仅仅是可见性，并且这样做有一个过渡，并且新的 div 在过渡完成之前不会出现？ 使用 javascript 很好。

我知道使用 display 不允许转换，但这是我唯一能想到的并且很好地了解了我要完成的事情。

这是 HTML：

<div class="square">
   <div class="title">Title</div>
   <div class="content">Content</div>
</div>

这是 CSS：

.square{
        width: 200px;
        height: 200px;
        background-color: lightblue;
}
  .content{
        display: none;
}
  .square:hover .content{
        display: block;
}
  .square:hover .title{
        display: none;
        transition-duration: 800ms;
}

Answer 1

要使原始 div 在您悬停时完全消失，并在此过程中进行过渡，您可以在 CSS 中使用不透明度属性和过渡属性。

以下是如何执行此操作的示例：

.square {
  width: 200px;
  height: 200px;
  background-color: lightblue;
  position: relative;  /* add this */
  transition: opacity 800ms;  /* add this */
}

.content {
  display: none;
  position: absolute;  /* add this */
  top: 0;  /* add this */
  left: 0;  /* add this */
  width: 100%;  /* add this */
  height: 100%;  /* add this */
}

.square:hover .content {
  display: block;
  opacity: 1;  /* add this */
}

.square:hover .title {
  display: none;
  opacity: 0;  /* add this */
  transition-duration: 800ms;
}

这将使原始 div 在您悬停时淡出并过渡，新的 div 将在其后面显示。

请注意，.title 和 .content 元素需要绝对定位在 .square 元素内才能正常工作。

如果只想在转换完成后显示新的 div，可以使用 JavaScript 中的 transitionend 事件来检测转换何时完成，然后显示新的 div。 以下是如何执行此操作的示例：

const square = document.querySelector('.square');
const content = document.querySelector('.content');

square.addEventListener('transitionend', () => {
  content.style.display = 'block';
});

这将仅在 the.title 元素的转换完成后显示 the.content div。

Answer 2

您可以使用opacity来隐藏标题，但它仍然存在。 添加click-event: none以使其不可见且不可单击。

或者您可以使用transform: translate()使标题随着过渡移动。 将这些行（注释）添加到您的代码中：

 .square{ width: 200px; height: 200px; background-color: lightblue; position: relative; }.content{ display: none; /*starts here*/ position: absolute; /* If you want to position the content exactly under the title*/ top: 0; left: 0; width: 100%; height: 100%; /*ends here*/ }.square:hover.content{ transform: translateX(0); /*Add here*/ display: block; }.square:hover.title{ transform: translateX(-100%); /*Add here*/ transition-duration: 800ms; }

 <div class="square"> <div class="title">Title</div> <div class="content">Content</div> </div>