CSS transition-задержка с отрицательным значением?

Я пытаюсь понять отрицательные значения для CSS transition-delay собственность. Сначала посмотрите пример кода. Их два divs, которые имеют различные задержки перехода.

Я думал, что предоставление отрицательного значения для задержки будет таким же, как предоставление положительного значения right div (0.2s), но он не ведет себя так же. Я думаю, что он не рисует для 0.2s что делает переход Джампи.

  • может кто-нибудь объяснить мне, что делает отрицательный transition-delay значение?
  • является отрицательным значением для transition-delay действительны, или они не должны использоваться?
  • если их можно использовать, что такое хороший вариант использования?

function toggle() {
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  left.classList.toggle('hidden');
  right.classList.toggle('hidden');
  left.classList.toggle('show');
  right.classList.toggle('show');
}
window.setInterval(toggle, 1500);
window.setTimeout(toggle, 100);
#container {
  background: yellow;
  display: flex;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.left,
.right {
  flex: 1;
}
.left {
  background: red;
  transition: transform 1s -0.2s cubic-bezier(0.19, 1, 0.22, 1);
}
.right {
  background: blue;
  transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}
.hidden {
  transform: translateY(100%);
}
.show {
  transform: translateY(0%);
}
.container-hide {
  transform: translateY(-100%);
}
<div id="container">
  <div class="left hidden"></div>
  <div class="right hidden"></div>
</div>
18
css css-transitions css3 html javascript

3 ответов

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

фрагмент W3C рабочий проект для перехода-задержка:

, если значение transition-delay является отрицательным смещением по времени, тогда переход будет выполняться в момент изменения свойства, но, похоже, начнется выполнение с указанного смещения. То есть, переход, по-видимому, начнется часть своего цикла. В случае, когда переход подразумевал начальные значения и отрицательное transition-delay, начальные значения берутся с момента изменения свойства.

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

если 10s продолжительность анимации имеет -5s задержка, кажется, начнется на полпути (пропуск первая половина), и завершить только 5s. Вот простой пример, чтобы показать эффект в действии.

Наглядный Пример:

function toggle() {
  var left = document.querySelector('.left');
  var right = document.querySelector('.right');
  left.classList.toggle('hidden');
  right.classList.toggle('hidden');
  left.classList.toggle('show');
  right.classList.toggle('show');
}
window.setInterval(toggle, 15000);
window.setTimeout(toggle, 100);
#container {
  background: yellow;
  display: flex;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.left,
.right {
  flex: 1;
}
.left {
  background: red;
  transition: transform 10s linear;
  transition-delay: -5s;
}
.right {
  background: blue;
  transition: transform 10s linear;
  transition-delay: 0s;
}
.hidden {
  transform: translateY(100%);
}
.show {
  transform: translateY(0%);
}
.container-hide {
  transform: translateY(-100%);
}
<div id="container">
  <div class="left hidden"></div>
  <div class="right hidden"></div>
</div>

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

22

Q: может ли кто-нибудь объяснить мне, что делает отрицательный transition-delay значение?

на документация MDN на transition-delay:

отрицательные значения приводят к тому, что переход начинается немедленно, но, по-видимому, частично начинается с эффекта анимации.

это также описано в W3C рабочий проект для свойства, как отмечали ответ Александра О'Мары:

, если значение transition-delay является отрицательным смещением времени, то переход будет выполняться в момент изменения свойства, но будет казаться, что началось выполнение с указанного смещения. То есть, переход, по-видимому, начнется частично через свой игровой цикл. В случае, когда переход имеет подразумеваемые стартовые значения и отрицательную задержку перехода, стартовые значения берутся с момента свойство изменяется.

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

#box1 {
  width: 200px;
  height: 50px;
  
  transition: width 3s 1s;
    
  background-color: green;
}

#box2 {
  width: 200px;
  height: 50px;
  
  transition: width 3s 0s;
    
  background-color: red;
}

#box3 {
  width: 200px;
  height: 50px;
  
  transition: width 3s -1s;
    
  background-color: blue;
}


#box1:hover, #box2:hover, #box3:hover {
  width: 400px;
}
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>

<ul>
  <li>Box 1 (green) has transition delay of 1s.</li>
  <li>Box 2 (red) has transition delay of 0s.</li>
  <li>Box 3 (blue) has transition delay of -1s.</li>
<ul>

вы можете видеть, что синее поле (с задержкой перехода -1s) немного нервный. Это потому, что начинается переход тут, и начинается на полпути через переход,как будто 1 секунда прошла с момента начала перехода.

в основном, отрицательные значения для свойства transition-delay сделать переход начать там, где переход был бы после |x| (абсолютное значение x), где x указанное значение свойства. Так, если указать -1s для задержки переход начнется немедленно и начнется там, где переход был бы в 1s in. Отрицательные значения также отнимают у продолжительность перехода.

Q: отрицательное значение для transition-delay действительны, или они не должны использоваться?

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

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

Q: если это нормально использовать их, что такое хороший вариант использования?

трудно наметить конкретный usecase для такого эффекта, как он не часто используется и очень ограничен в использовании. Я предполагаю, что потенциал потенциального использования может повторно используйте переход, прыгая в разные состояния во время переходного цикла.

выше особенно true при использовании анимации, вопреки переходам, поскольку они повторяются. Когда вы используете анимацию, отрицательные задержки могут позволить вам перейти к определенным точкам анимации и разрешить возможность повторного использования нескольких элементов, которые разделяют поведение, просто не время. Возьмите пример ниже (найдено здесь):

div {
  border-radius:50%;
  position:absolute;
  top:50%; left:75%;
}
div:nth-of-type(odd) { background:black; }
div:nth-of-type(even) { background:white; border:2px solid black; }
div:nth-of-type(11) {
  height:10px; width:10px;
  margin-top:-5px; margin-left:-5px;
  -webkit-animation:slide 3s ease-in-out infinite;
  animation:slide 3s ease-in-out infinite;
}
div:nth-of-type(10) {
  height:20px; width:20px;
  margin-top:-12px; margin-left:-12px;
  -webkit-animation:slide 3s -2.7s ease-in-out infinite;
  animation:slide 3s -2.7s ease-in-out infinite;
}
div:nth-of-type(9) {
  height:40px; width:40px;
  margin-top:-20px; margin-left:-20px;
  -webkit-animation:slide 3s -2.4s ease-in-out infinite;
  animation:slide 3s -2.4s ease-in-out infinite;
}
div:nth-of-type(8) {
  height:60px; width:60px;
  margin-top:-32px; margin-left:-32px;
  -webkit-animation:slide 3s -2.1s ease-in-out infinite;
  animation:slide 3s -2.1s ease-in-out infinite;
}
div:nth-of-type(7) {
  height:80px; width:80px;
  margin-top:-40px; margin-left:-40px;
  -webkit-animation:slide 3s -1.8s ease-in-out infinite;
  animation:slide 3s -1.8s ease-in-out infinite;
}
div:nth-of-type(6) {
  height:100px; width:100px;
  margin-top:-52px; margin-left:-52px;
  -webkit-animation:slide 3s -1.5s ease-in-out infinite;
  animation:slide 3s -1.5s ease-in-out infinite;
}
div:nth-of-type(5) {
  height:120px; width:120px;
  margin-top:-60px; margin-left:-60px;
  -webkit-animation:slide 3s -1.2s ease-in-out infinite;
  animation:slide 3s -1.2s ease-in-out infinite;
}
div:nth-of-type(4) {
  height:140px; width:140px;
  margin-top:-72px; margin-left:-72px;
  -webkit-animation:slide 3s -0.9s ease-in-out infinite;
  animation:slide 3s -0.9s ease-in-out infinite;
}
div:nth-of-type(3) {
  height:160px; width:160px;
  margin-top:-80px; margin-left:-80px;
  -webkit-animation:slide 3s -0.6s ease-in-out infinite;
  animation:slide 3s -0.6s ease-in-out infinite;
}
div:nth-of-type(2) {
  height:180px; width:180px;
  margin-top:-92px; margin-left:-92px;
  -webkit-animation:slide 3s -0.3s ease-in-out infinite;
  animation:slide 3s -0.3s ease-in-out infinite;
}
div:nth-of-type(1) {
  height:200px; width:200px;
  margin-top:-100px; margin-left:-100px;
  -webkit-animation:slide 3s ease-in-out infinite;
  animation:slide 3s ease-in-out infinite;
}
@keyframes slide {
  0% { left:75% }
  50% { left:25%; }
  100% { left:75%; }
}
@-webkit-keyframes slide {
  0% { left:75% }
  50% { left:25%; }
  100% { left:75%; }
}
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

здесь отрицательные animation-delay значения используются путем перехода в различные состояния в цикле анимации. Все круги ведут себя одинаково, двигаясь вперед и назад, но в разное время, когда они имитируют волну. Отрицательный animation-delay заставляет круги двигаться в разное время, далее в цикл анимации.

5

отрицательный переход будет вычитаться из времени перехода, но он не пройдет 0.

0