Измените отображение ни одного, чтобы отобразить встроенный блок и вращать одновременно с помощью css. - PullRequest
Новая
       52

Измените отображение ни одного, чтобы отобразить встроенный блок и вращать одновременно с помощью css.

0 голосов
/ 20 октября 2018

Как я могу перейти с 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 и простого изменения его цвета при наведении курсора.Мне нужен именно тот случай, который я объяснил выше.

Ответы [ 2 ]

0 голосов
/ 20 октября 2018

@ 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

Если вам нужно, чтобы анимация была развернута при наведении курсора, не стесняйтесь протягивать руку.Потребуется дополнительная настройка, но я рад помочь.

0 голосов
/ 20 октября 2018

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>
...