从显示 none 更改为显示内联块并与 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

display:none 正在阻止轮换工作的过渡。您可以改用动画：

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

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

.squareH {
  display: none;
  height: 100px;
  width: 100px;
  background: #12dd12;
}

.wrapper:hover .squareH {
  display: inline-block;
  animation:change 5s linear forwards;
}
@keyframes change{
  to {transform: rotate(-180deg);}
}

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

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

  </div>
</div>

Answer 2

@YaroslavTrofimov 不使用 display: none; 是这项工作的关键部分。当使用 display: none 时，元素将从 DOM 中删除并且不再存在，因此无法转换 to/from。您需要结合使用 opacity 和 visibility。 opacity: 0;明明让它不可见，但是单独使用它还是会存在，占用space。将它与 visibility: hidden; 一起使用会阻止它占用 space 并阻止其他元素（尽管它仍在 DOM 内，因此可以转换）。请参阅下面的示例和 link 到 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

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

从显示 none 更改为显示内联块并与 css 同时旋转

Change from display none to display inline-block and rotate at the same time with css

html

css

transform

css-transitions