Абсолютно позиционированный элемент перемещается после завершения анимации - PullRequest
Новая
       8

Абсолютно позиционированный элемент перемещается после завершения анимации

0 голосов
/ 02 апреля 2019

это было некоторое время. В любом случае, возникают проблемы с получением абсолютно позиционированного элемента, который остается в центре при анимации . Более того, я вижу элемент «смещение» после завершения анимации, и я понятия не имею, почему. Самая близкая проблема, которую я обнаружил, была css animations перемещает положение элемента , но это не помогло для этого общего случая использования.

Отлаживая кадры анимации, мы видим следующее:

во время анимации during animation

после анимации after animation

Тьфу! Игра с позиционированием не работала, но animation-fill-mode что-то сделал; однако я заметил, что translate не влияет на позиционируемый элемент во время анимации или когда animation-fill-mode установлен на forwards или both. Зачем? Побочным эффектом является то, что когда анимация завершает работу, позиция элемента не будет пересчитана, поэтому не нужно перекрашивать.

* +1025 * Пример: 
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

и CSS с использованием animate.css для облегчения жизни: 

.alert {
  min-width: 500px;
  position: absolute;
  top: 0;
  left: 50%;
  animation-name: fadeInDown;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
  /* animation-fill-mode: forwards; */
  transform: translateX(-50%);
}

Демо: https://codepen.io/atomicpages/pen/yrymVY?editors=1100

Цели:

  1. По центру
  2. Элемент минимум 500px
  3. Элемент не перемещается после завершения кадра анимации

Ваша помощь приветствуется.

Ответы [ 3 ]

2 голосов
/ 02 апреля 2019

Используйте пользовательский fadeInDown без animate.css, поскольку он использует transform: translate3d(0, -100%, 0) в fadeIndown 

.alert {
  width: 500px;
  top: 0;
  left: 50%;
  animation-name: fadeInDown;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  transform: translateX(-50%);
  position:absolute;
}

@keyframes fadeInDown{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@-webkit-keyframes fadeInDown{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<div class="alert alert-warning alert-dismissible fade show" role="alert">
  <strong>Holy guacamole!</strong> You should check in on some of those fields below.
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
1 голос
/ 02 апреля 2019

Причина в том, что встроенный fadeInDown также использует transform для своей анимации, следовательно, сбрасывает / переопределяет ваше начальное значение и восстанавливает его после, если вы не используете animation-fill-mode: forwards;, что сохранит его на 50%левый край все время.

И обратите внимание, предустановка transform «значений», таких как translateX, не сохраняется, когда к «свойству» добавляется другое «значение», всесуществующие значения перезаписываются.

Оригинальный CSS 

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

Чтобы ваша работа работала, вам необходимо переопределить встроенную, добавив к ней значение translateX ибудет вести себя.

И если вы это сделаете, есть также префиксное правило @keyframes, которое также необходимо обновить.

Новый CSS 

@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-50%, -100%, 0);
    transform: translate3d(-50%, -100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(-50%, 0, 0);
    transform: translate3d(-50%, 0, 0);
  }
}

В качестве примечания:

С предоставленной настройкой он всегда будет занимать всю ширину и центрирование не будет иметь никакого эффекта, если вы не дадите ему max-width где-то еще.

0 голосов
/ 02 апреля 2019

Попробуйте удалить transform: translateX, после анимации элемент остается там, где он есть, и измените его влево: 0; 

.alert {
  min-width: 500px;
  top: 0;
  left: 0;
  animation-name: fadeInDown;
  animation-duration: 0.75s;
  animation-timing-function: ease-in-out;
}
...