I have a CSS file that specifies a transition property as follows (vendor prefixes excluded for brevity):
transition: opacity 1s;
Now, I want to tweak the transition-delay property of each element using JavaScript to create a stagger effect. Here's how I'm doing it with jQuery:
$(element).css('transition-delay', delay + 's');
Surprisingly, this code does not directly add an inline style of transition-delay: Xs to the element. Instead, it results in:
<div style="transition: Xs;">
Although this may seem odd, it actually works correctly. The browser somehow interprets transition: Xs to mean set the transition-delay to Xs while keeping the other properties intact.
However:
If I retrieve the inline style of the element using $(element).attr('style') and then reapply it to the element like $(element).attr('style', style), the HTML appears identical, but now the transition completely overrides the other properties, effectively setting the element's transition value to all Xs ease 0s.
// Original HTML - functional
<div style="transition: Xs">
// Then this happens
var style = $(el).attr('style');
$(el).attr('style', style);
// Resulting HTML - problematic!
<div style="transition: Xs">
Demo
You can see a demonstration of this behavior on JSFiddle: http://jsfiddle.net/7vp8m/4/