Всегда ли применяется новый переход перед новым значением? - PullRequest
Новая
       3

Всегда ли применяется новый переход перед новым значением?

0 голосов
/ 09 апреля 2020

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

Похоже, когда я перемещаю мышь над элементами, new transition значение используется для перехода "вперед", а когда я отыграю, значение old используется для перехода "назад".

Я не смог найти много документации по этому поводу. Гарантирован ли заказ? 

div {
  background: red;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 30px;
  left: 0px;
  transition: left 1s linear, top 1s ease-in-out;
}
:hover div {
  top: 150px;
  left: 400px;
  transition: left 1s linear, top 1s linear;
}
div:nth-child(2) { transition-delay: 0.1s; }
div:nth-child(3) { transition-delay: 0.2s; }
div:nth-child(4) { transition-delay: 0.3s; }
Hover on me!
<div></div>
<div></div>
<div></div>
<div></div>

1 Ответ

2 голосов
/ 09 апреля 2020

[...] все 3 свойства меняют свои значения при наведении курсора на элемент, и неясно интуитивно понятно, в каком порядке применяются изменения, по крайней мере, исходя из фонового опыта с такой средой, как Core Animation где слои «модель» и «презентация» являются отдельными вещами, и параметры анимации устанавливаются до запуска анимации. Я думаю, что ваш ответ имеет смысл, хотя ...

Я думаю, что ключевое отличие здесь в том, что думать о переходе в терминах "анимации, начинающейся, когда элемент находится / не находится: завис", - это неправильный способ мышления. об этом.

Вы правы, парадигма, к которой вы привыкли (парадигма MVC), на самом деле не относится к CSS. По крайней мере, не на уровне, на котором вы как писатель CSS затронуты. Кстати, значение spe c для этого: CSS Переходы

В CSS изменения в свойствах CSS применяются немедленно. Переходы позволяют применять изменения к значению в течение некоторого периода времени. В вашем случае у вас есть четыре элемента div, все из которых настроены на 30 пикселей сверху и 0 пикселей от левого края экрана.

При наведении курсора, благодаря вашему селектору :hover div, применяются новые стили. Обычно они применяются мгновенно, но поскольку вы дали им переход, это происходит в течение продолжительного времени. Вы можете видеть каждое движение в отдельности благодаря transition-delay, который вы дали некоторым из них. Чтобы было еще проще видеть, я изменил цвет каждого элемента, чтобы он был уникальным. Должно быть достаточно ясно, какие из них перемещаются первыми.

Как только вы убираете мышь, псевдокласс :hover больше не применяется, и поэтому стили под div повторно применяются. Опять же, они будут применены мгновенно, но transition, который вы установили (вместе со стилями transition-delay on 3 of the 4 divs) changes that to occur over a longer duration. So, just as when the: hover` применяются, сначала перемещается красный div, затем остальные после увеличения задержки на 0.1 с каждый. 

div {
  background: red;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 30px;
  left: 0px;
  transition: left 1s linear, top 1s ease-in-out;
}
:hover div {
  top: 150px;
  left: 400px;
  transition: left 1s linear, top 1s linear;
}
div:nth-child(2) { transition-delay: 0.1s; background: blue; }
div:nth-child(3) { transition-delay: 0.2s; background: green; }
div:nth-child(4) { transition-delay: 0.3s; background: yellow; }
Hover on me!
<div></div>
<div></div>
<div></div>
<div></div>
...