javascript - bootstrap - ¿CSS de retraso de transición con un valor negativo?

html tooltip

Question

Estoy tratando de entender los valores negativos para la propiedad de transition-delay CSS. Por favor mira el ejemplo del código primero. Hay dos div s que tienen diferentes retardos de transición.

Pensé que dar el valor negativo para el retraso sería lo mismo que dar un valor positivo a la div derecha ( 0.2s ) pero no se está comportando igual. Creo que no pinta en 0.2s que hace que la transición se ponga en movimiento.

• ¿Puede alguien explicarme qué hace el valor de transition-delay negativo?
• ¿Es válido un valor negativo para transition-delay de transition-delay , o no debería usarse?
• Si está bien usarlos, ¿cuál es un buen caso de uso?

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>

Answer 1

P: ¿Puede alguien explicarme qué hace el valor de transition-delay negativo?

Según la developer.mozilla.org/en-US/docs/Web/CSS/transition-delay para el transition-delay :

Los valores negativos hacen que la transición comience de inmediato, pero parece que la transición parece comenzar en parte a través del efecto de animación.

Esto también se describe en el borrador de trabajo del W3C para la propiedad , como lo menciona la respuesta de Alexander O ''Mara :

Si el valor transition-delay de transition-delay es un desplazamiento de tiempo negativo, la transición se ejecutará en el momento en que se cambie la propiedad, pero parecerá que se ha iniciado la ejecución en el desplazamiento especificado . Es decir, la transición parecerá comenzar en parte a través de su ciclo de juego. En el caso de que una transición tenga valores de inicio implícitos y un retardo de transición negativo, los valores de inicio se toman desde el momento en que se cambia la propiedad.

Esto significa que la transición comenzará de inmediato y en parte, como si el tiempo especificado ya hubiera pasado. Por ejemplo, considera esto (abrir fragmento):

#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>  

Puedes ver que el cuadro azul (el que tiene un retardo de transición de -1s ) está un poco nervioso. Esto se debe a que la transición comienza de inmediato y se inicia en parte a través de la transición, como si hubiera transcurrido 1 segundo desde que la transición debería haber comenzado .

Básicamente, los valores negativos para el transition-delay propiedad hacen que la transición comience en el lugar donde la transición habría estado después |x| (valor absoluto de x ) tiempo, donde x es el valor especificado de la propiedad. Entonces, si especificamos -1s para la demora, la transición comenzará de inmediato, y comenzará donde la transición habría sido de 1s en. Los valores negativos también eliminan la duración de la transición.

P: ¿Es válido un valor negativo para transition-delay de transition-delay , o no debería usarse?

Son absolutamente válidos, y han sido válidos desde el primer Borrador de Trabajo de Transiciones CSS . La propiedad permite todos los valores de tiempo, y permitir valores negativos es una consecuencia de eso.

Debido al comportamiento definido del transition-delay de transition-delay para retrasar una transición por un cierto desplazamiento, los valores negativos siguen eso por medio de la compensación por un valor negativo. Eso, a su vez, lleva a que las animaciones comiencen a la mitad, como si el valor absoluto del tiempo especificado ya hubiera pasado.

P: Si está bien usarlos, ¿cuál es un buen caso de uso?

Es difícil delinear un caso concreto para tal efecto, ya que no se usa a menudo y su uso es muy limitado. Supongo que un uso potencial podría ser reutilizar la transición saltando a diferentes estados durante el ciclo de transición.

Lo anterior es especialmente cierto cuando se usan animaciones , al contrario de las transiciones, ya que se repiten. Cuando usa animaciones, los retrasos negativos pueden permitirle saltar a ciertos puntos de la animación y permitir la reutilización en múltiples elementos que comparten el comportamiento, pero no la sincronización. Toma el siguiente ejemplo (encontrado here ):

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>

Aquí, los valores de animation-delay negativos se utilizan saltando a diferentes estados en el ciclo de animación. Todos los círculos comparten el mismo comportamiento al ir y venir, pero con un tiempo diferente, ya que simulan una onda. El animation-delay negativo hace que los círculos se muevan en diferentes momentos, más allá del ciclo de animación.

Answer 2

Un transition-delay negativo es en realidad completamente válido, y tiene un significado diferente que 0s y no es lo mismo que un retardo positivo.

Extracto del borrador de trabajo del W3C para el retraso de la transición :

Si el valor transition-delay de transition-delay es un desplazamiento de tiempo negativo, la transición se ejecutará en el momento en que se cambie la propiedad, pero parecerá que se ha iniciado la ejecución en el desplazamiento especificado. Es decir, la transición parecerá comenzar en parte a través de su ciclo de juego. En el caso de que una transición tenga valores de inicio implícitos y un transition-delay negativo, los valores de inicio se toman desde el momento en que se cambia la propiedad.

El resultado es que la primera parte de la animación se saltará. Básicamente, la hora de inicio cambia, cambiando el punto calculado en la animación.

Entonces, si una animación de 10s -5s tiene un retraso de -5s , parecerá que comienza a mitad de camino (saltándose la primera mitad), y se completa en solo 5s . Aquí hay un ejemplo simple para mostrar este efecto en acción.

Ejemplo ilustrativo:

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>

Realmente no hay ninguna razón para evitar necesariamente el uso de valores de duración negativos, ya que son válidos, solo tienen un caso de uso muy limitado.

Answer 3

Una transición negativa restará del tiempo de transición, pero no pasará 0.