Анимация при наведении курсора «прыгает» во время зависания - PullRequest
Новая
       3

Анимация при наведении курсора «прыгает» во время зависания

1 голос
/ 19 января 2020

Я хочу получить простую анимацию при наведении курсора в css, но при зависании анимация скачет и делает ее глупой. Есть ли способ избежать этого? * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *

* * * * * * * * * * * * * * * * * * * * * *;}};}}. 

.item {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background-color: blue;
  position: relative;
  transition: 800ms;
}

.item::after {
  position: absolute;
  bottom: 0;
  height: 30%;
  width: 100%;
  content: "";
  background-color: grey;
  transition: transform 800ms ease-in-out;
}

.item:hover::after {
  transform: scaleY(2);
  transform-origin: bottom;
}
<div class="item">

</div>

1 Ответ

1 голос
/ 19 января 2020

Это происходит потому, что transform-origin: bottom; применяется только при наведении на предмет. Когда он не завис, он возвращается к значению по умолчанию - center. Переместите правило в объявление ::after. 

.item {
  width: 20%;
  height: 0;
  padding-top: 20%;
  background-color: blue;
  position: relative;
  transition: 800ms;
}

.item::after {
  position: absolute;
  bottom: 0;
  height: 30%;
  width: 100%;
  content: "";
  background-color: grey;
  transition: transform 800ms ease-in-out;
  transform-origin: bottom;
}

.item:hover::after {
  transform: scaleY(2);  
}
<div class="item"></div>
...