@tema1302
Помогло? Отметь решением!))

Почему абсолютно заданные элементы теребятся при наведении с transition?

Создаю примерно такую анимацию при наведении -
https://jsfiddle.net/tema1302/f1dzea8b/41/

Суть в том, что при наведении на границу появляющихся элементов эффект hover делает так, что элементы начинают болтаться, как невменяемые.

Сначала я сделал всё через transform: translate..., но начала появлятся такая ситуация и я нагуглил, что проблема как раз в transform (много разных объяснений), поэтому я переделал на позиционирование через top, left.

Стало чуть лучше, но проблема не ушла. Подскажите, пожалуйста, как пофиксить и в чем проблема?

P.S. Делал даже через JS, чтобы абсолютные элементы были не дочерними блоками, а находились выше по древу, ведь все дети блока с классом .block принимают на себя состояние hover. Но не помогло, поведение было таким же трясущимся.

P.P.S. Если вдруг ссылка не отображается, о чем свидетельствуют комментарии ниже, прилагаю код еще и сюда:
<div class="wrapper">
  <div class="block">
    <div class="el-1 el-hover"></div>
    <div class="el-2 el-hover"></div>
    <div class="block__el">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil molestias laborum in dignissimos laboriosam voluptatem mollitia eligendi dolore commodi cupiditate, vitae provident illum amet quidem doloremque quas nobis nulla ullam.
      <div class="el-3 el-hover"></div>
      <div class="el-4 el-hover"></div>
    </div>
  </div>
  <div class="block">
    <div class="el-1 el-hover"></div>
    <div class="el-2 el-hover"></div>
    <div class="block__el">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil molestias laborum in dignissimos laboriosam voluptatem mollitia eligendi dolore commodi cupiditate, vitae provident illum amet quidem doloremque quas nobis nulla ullam.
      <div class="el-3 el-hover"></div>
      <div class="el-4 el-hover"></div>
    </div>
  </div>
  <div class="block">
    <div class="el-1 el-hover"></div>
    <div class="el-2 el-hover"></div>
    <div class="block__el">
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil molestias laborum in dignissimos laboriosam voluptatem mollitia eligendi dolore commodi cupiditate, vitae provident illum amet quidem doloremque quas nobis nulla ullam.
      <div class="el-3 el-hover"></div>
      <div class="el-4 el-hover"></div>
    </div>
  </div>
</div>


.wrapper {
	 padding: 20px;
	 background: green;
	 display: flex;
	 justify-content: space-around;
}
 .block {
	 z-index: 2;
	 width: 200px;
	 height: auto;
	 transition: all 0.5s ease;
	 display: inline-block;
	 margin-right: 10px;
	 position: relative;
}
 .block__el {
	 transition: all 0.5s ease;
	 background: #fff;
	 box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.1);
	 border-radius: 20px;
	 padding: 10px 20px;
}
 .block .el-hover {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 transition: all 0.5s ease;
	 opacity: 0;
	 display: block;
	 background: yellow;
	 width: 50px;
	 height: 50px;
}
 .block .el-hover.el-1 {
	 z-index: -1;
}
 .block .el-hover.el-2 {
	 z-index: -1;
}
 .block .el-hover.el-3 {
	 z-index: -1;
}
 .block .el-hover.el-4 {
	 z-index: -1;
}
 .block:hover {
	 transform: scale(1.05);
}
 .block:hover .el-hover {
	 opacity: 1;
}
 .block:hover .el-hover.el-1 {
	 top: 10%;
	 left: -2%;
}
 .block:hover .el-hover.el-2 {
	 top: 90%;
	 left: 100%;
}
 .block:hover .el-hover.el-3 {
	 top: 10%;
	 left: 90%;
	 z-index: 0;
}
 .block:hover .el-hover.el-4 {
	 top: 90%;
	 left: 6%;
	 z-index: 0;
}
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
@strelok011
Поиграю в экстрасекса, который ковид не угадал.
Я предполагаю что в момент когда элемент попадает под мышку - ему в ховере дается позиционирование и смещение, причем абсолютное. В результате он пропадает из зоны влияния курсора и бац - состояние ховера отменено, т.к. за пределами курсора.. Дал, дал, ушел - вернулся. И опять блин под курсор. Что в этот момент срабатывает? Ховер конечно. Процессоры сейчас мощные, скорости большие - вот и мерцание.
Но, если будет таки код доступен для анализа, можно поиграть в эксперда, а не Вангу.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы