Отключить переход во время анимации - PullRequest
Новая
       15

Отключить переход во время анимации

1 голос
/ 23 апреля 2019

Демо задачи: https://jsfiddle.net/t0qsek8n/1/

<div class="test" id="test">Test text</div>

.test {
  position: relative;
  top: 0px;
  border: 1px solid #ccc;
  animation: test 5s;
  transition: top 1s;
}

@keyframes test {
  0% {
    opacity: 0;
    transition: none;
  }
  100% {
    opacity: 1;
    transition: none;
  }
}

const test = document.getElementById('test');
setTimeout(() => {
    test.style.top = "100px"
}, 1000);

Я ожидаю, что если значение свойства top будет изменено JS, переход transition: top 1000ms не произойдет из-за transition: none, который обеспечивает @keyframes test, но на самом деле переход происходит. Я не могу понять, почему значение transition из keyframes не переопределяет существующее определение для transition.

1 Ответ

1 голос
/ 23 апреля 2019

давайте рассмотрим другой пример, используя display: 

.test {
  position: relative;
  top: 0px;
  border: 1px solid #ccc;
  animation: test 5s forwards;
}

@keyframes test {
  0% {
    opacity: 0;
    display: none;
  }
  100% {
    opacity: 1;
    display: none;
  }
}
<div class="test" id="test">
  Test text
</div>

Мы логически ожидаем, что никогда не увидим элемент, так как установили display:none, и мы сделали анимацию равной forwards, но отображение просто игнорируется, потому что это не может быть анимировано .Та же логика с transition, так как это свойство, которое мы не можем анимировать ref .

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

Свойства, которые не указаны в каждом ключевом кадре, интерполируются, если это возможно, - свойства, которые не могут быть интерполированы, удаляются из анимации . ref

...