The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Pairing multiple transitions

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #189365

    I’m trying to add a transition to a grid of elements whereby a grid element, when clicked, should rise (by changing box-shadow) and then expand to fill a container. Currently I use javascript to clone the element, append it to my container with injected styles for the starting position (top, left and width), and then add a touched class 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.


    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.


    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 setTimout instead.

    Dunno…that’s just something rattling around in the back of my [tiny] brain.


    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.


    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.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.