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中删除，并且不再存在，因此无法与之转换。您需要同时使用两者 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

如果您需要在悬停时反转动画，请随时伸手。还需要一些其他调整，但我很乐意提供帮助。

从不显示更改为显示内联块并使用CSS同时旋转

2 个答案: