- This topic is empty.
November 27, 2014 at 8:43 am #189365AnonymousInactive
I’m trying to add a transition to a grid of elements whereby a grid element, when clicked, should rise (by changing
touchedclass that has the finishing properties (top, left, bottom, right and width), which I had hoped I could use with CSS transitions to apply the animation. My current syntax is intended to apply a transition of 0.5s to the box-shadow effect and a transition of 0.5s with a 0.5s delay to my left, right, bottom, top and width properties for the expansion.
Instead, with my current set up the element is just immediately filling the container with no transitions applied.
A reduced test case can be found here:
This is the first time I’ve done any work with CSS transitions and I am aware I may have gotten something fundamentally wrong. Any advice would be appreciated.November 27, 2014 at 8:57 am #189367
I don’t think this is a transition issue, I think this is a JS issue.
I’d try breaking down the JS into steps, make sure each step works as you intend and then add the next and see where it breaks.November 27, 2014 at 9:23 am #189369
Could be I’m wrong…Lord knows I know little about pure JS…but I have this feeling I’ve seen something about classes being added /removed taking zero time so the transition doesn’t fire and having to use a
Dunno…that’s just something rattling around in the back of my [tiny] brain.November 27, 2014 at 9:57 am #189376
I think it’s that each JS ‘statement’ is executed immediately so it runs through each one and then applies the final result.
It doesn’t stop after each step…it just keeps on truckin’ to the end.November 27, 2014 at 10:29 am #189384
As I said, I know little about JS so I’ll push this over to the Js section in the hopes that someone more knowledgeable can confirm my thoughts.
I don’t want to have misinformation out there.