html - 从不显示更改为显示内联 block 并与css同时旋转

Question

如何将 display: none 更改为 display: inline-block 并同时使用 css 旋转？

这是我想做的

html

<div class="wrapper">
  <div class="squareV">

  </div>
  <div class="squareH">

  </div>
</div>

CSS

.squareV {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: #343434;
}

.wrapper:hover .squareV {
  display: none;
}

.squareH {
  display: none;

  transition: transform 5s;
}

.wrapper:hover .squareH {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: #12dd12;

  transform: rotate(-180deg);
}

jsfiddle

我希望我的代码可以工作，但它不工作。为什么？

请不要建议使用一个 div 并在悬停时仅更改其颜色的替代方案。我需要的正是我上面解释的案例。

Answer 1

@YaroslavTrofimov 不使用 display: none; 是这项工作的关键部分。当使用 display: none 时，元素将从 DOM 中删除并且不再存在，因此无法转换到/从。您需要结合使用两者 opacity 和visibility。 opacity: 0; 明明是让它不可见，但是单独使用它还是会存在，而且会占用空间。将它与 visibility: hidden; 一起使用会阻止它占用空间并阻止其他元素(尽管它仍在 DOM 中，因此可以转换)。请参阅下面的示例和指向 CodePen 的链接。

// html
<div class="wrapper">
  <div class="squareV">

  </div>
  <div class="squareH">

  </div>
</div>


// css
.wrapper {
  background: dodgerblue;
  height: 100px;
  width: 100px;
}
.wrapper:hover .squareV {
  display: none;
}
.wrapper:hover .squareH {
  opacity: 1;
  visibility: visible;
  transform: rotate(-180deg);
  transition: transform 1s ease;
}
.squareV {
  display: inline-block;
  height: 100px;
  width: 100px;
  background: #343434;
}
.squareH {
  opacity: 0;
  visibility: hidden;
  height: 100px;
  width: 100px;
  background: #12dd12;
}

https://codepen.io/RuNpiXelruN/pen/KGeWMV

如果您需要在悬停时反转动画，请随时联系我们。这需要一些额外的调整，但我很乐意提供帮助。