Как заставить элементы оставаться на месте при использовании переходов при наведении

#css #css-transitions

#css #css-переходы

Вопрос:

Как мне заставить элементы li не перемещаться при применении переходов с помощью :hover ? Окружности создаются с применением высоты и радиуса границы к элементам li. Я пытался увеличить контейнер ul, но, похоже, это не сработало. Спасибо за вашу помощь.

Код:

  body {}
    main {
      display: flex;
      background: #eeeeee;
      min-height: 100vh;
      padding: 1em;
      
    }

    h1 {
      font-family: arial;
      font-size: 1.4em;
      padding-left: 1em;
    }

    ul {
      padding-top:50px;
      min-height: 600px;
      position:relative;

    }

    li {
      position:relative;
      background-color: purple;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      padding: 1em;
      text-align: center;
      list-style: none;
      display: inline-block;
      line-height: 50px;
      border: 5px solid red;
      margin-right: -1em;
      z-index: 0;
      transition: width 0.5s, height 0.5s, background-color 1s, line-height 0.5s;
      
    }

    li:hover {
      display: inline-block;
      position:relative;
      width: 90px;
      height: 90px;
      z-index: 10;
      background-color: green;
      line-height: 90px;
    }

 <body>
  <main>
    <h1>
      My animated Menu
    </h1>
    <div class="menu">
      <ul>
        <li>X</li>
        <li>Y</li>
        <li>Z</li>
      </ul>
    </div>
  </main>
</body>

1. Они «перемещаются», потому что вы увеличиваете их ширину и высоту, поэтому, конечно, они занимают больше места при наведении. Как бы выглядел ваш желаемый результат? «Где» они должны расширяться? под другими li s?

2. Вы могли бы использовать transform: scale() вместо

Ответ №1:

Используйте преобразования CSS3, таким образом, элемент может свободно перемещаться или масштабироваться в DOM, не влияя на размер макета.

Приятный бонус: анимация будет более эффективной с точки зрения кадров в секунду, поскольку макет не будет пересчитываться для каждого кадра (будет использоваться графический процессор)

 ul {
  padding-top: 50px;
}

li {
  background-color: purple;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  padding: 1em;
  text-align: center;
  list-style: none;
  display: inline-block;
  line-height: 50px;
  border: 5px solid red;
  margin-right: -1em;
  z-index: 0;
  transition: transform 0.5s, background-color 1s;
}

li:hover {
  display: inline-block;
  position: relative;
  transform: scale(1.5);
  z-index: 10;
  background-color: green;
}

 <div class="menu">
  <ul>
    <li>X</li>
    <li>Y</li>
    <li>Z</li>
  </ul>
</div>

1. бонусный вопрос: что делать, если вы не хотите использовать transition: all (потому что я хочу разное время перехода для границы, фона)? Добавление преобразования к переходу, похоже, не работает?

2. Да, вы можете! Я отредактировал ответ, чтобы отразить ваш первоначальный вопрос 🙂 Извините, я не видел различий во времени…