Interruption of a CSS Transition Does Not Work for Same Attribute Value

Interruption of a CSS transition does not work for same attribute value

Sorry - I missunderstood what was happening in yopur question.

I have done a new snippet with a simplified case:

#a, #b {
  width: 200px;
  height: 100px;
  border: solid 1px black;
  display: inline-block;
  background-color: lightgreen;
  margin-top: 50px;
}

#a {
  margin-right: -5px;
}

#container {
  width: 400px;
  height: 50px;
  border: solid 1px black;
  margin: 0px;
}

#child {
  width: 0px;
  height: 50px;
  position: absolute;
  background-color: blue;  
}

#child {
  transition: width 0.5s;
  width: 400px;
}

#a:hover ~ #container #child {
  transition: width 10s;
  width: 0px;
}

#b:hover ~ #container #child {
  transition: width 0.5s;
  width: 0px;
}

<div id="a">A</div>
<div id="b">B</div>
<div id="container">
  <div id="child"></div>
</div>

Opacity transition causing animation interruption

Remove the transition property from

.duplicate-group:hover .duplicate-controls{}

Jerky interrupted CSS transitions with ngAnimate on Chrome

I noticed when the animation occurs the style is being set to:

transition: none;
-webkit-transition: none;

I assume ngAnimate sets these style properties during it's processing and the other browsers are unaffected by them during the brief moment they are set but when chrome sees them it immediately completes the animation as though no transition was applied.

So to fix your problem you just need to ensure these properties get ignored by setting your properties as !important:

transition: height 5s !important;
-webkit-transition: height 5s !important;

Which can be seen working in the plnkr here

How to make transition duration to be the same for all values?

The spec is here: I'd check §3.4.4
https://www.w3.org/TR/css-transitions-1/#starting

Otherwise, implementations must cancel the running transition and start a new transition whose:

...

• reversing-adjusted start value is the same as the start value, and

So if you return to the original value, then it's the same transition, but going to a new value it starts a new transition from the current value.

So one way to bypass this could be by passing in an intermediary value, just to trigger a new transition:

// go to any value (that is not the current value or the original value)
document.getElementById("boxA").style.width = "999px"; 

// Trigger reflow  (See @Kaiido's comment below)
 document.body.offsetWidth;

// and then immediately go back to the original value
document.getElementById("boxA").style.width = "100px";

Now both boxes will have two transitions that will have the same duration, but one will end at 100px, and the other at 101px.

---

Also I think the rationale explained is relevant: §3.1 Faster reversing of interrupted transitions

---

Related Topics