CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Eugene Gordin
Eugene Gordin

Reputation: 4107

CSS3 transitions animation

I'm very new to CSS/HTML/JS so I don't have lots of experience with CSS transitions.

I'm trying to animate a div elements on my page, but I can't achieve a desired result so far.

Here is my problem:

In my HTML I have a div container element that has 5 div elements inside of it. They look like simple boxes positioned in the middle of the screen and aren't visible for now. I also have 5 buttons in the corner of the screen.

What I'm trying to do is:

when I click a button (for example button 3) 3 of the divs on the left should disappear and be moved to the left behind the margin of the screen and 2 of the divs should do the same, but move to the right. After that I want 3 divs that are on the right slide back to the screen and 2 divs on the right should slide back as well. So it looks like they sliding towards each other to the positions they started from initially.

I'm trying to do this effect using CSS transitions (transform: translateX(Npx);). So in my JS file I have something like this:

$(document).ready(function() {

    $(".button").click(function(){

    // PART 1
       // move 3 divs to the left using transform: translateX(Npx) (no animation)
       // move 2 divs to the left using transform: translateX(Npx) (no animation)

    // PART 2
       // slide 3 divs to the left using transform: translateX(Npx) (with animation)
       // slide 2 divs to the left using transform: translateX(Npx) (with animation)

    });

So the problem is that in this case only the part one works and part two seems to be not working.....if I attach the part on code to a different event...like another click button...it works just fine.

So my question is if these two transitions can be done under one event?!?!

Upvotes: 2

Views: 195

Answers (1)

JSP64
JSP64

Reputation: 1462

I have done this, and this kind of effect can look great. If I understand your question correctly, your issue is that you run the animation AFTER you moved the divs, so your animation function uses the wrong starting point.

What you need is:

  1. Be sure you have a CSS position:relative; set on your divs so the animation can work.
  2. Run your animation function moving your divs relative to their current position (i.e. top, left), and include a success callback. You may need to first use offset() and some math to figure out the distance traveled.
  3. On the completion of your animation (success callback), change the relative position of your divs back to 0px (or whatever they were before) and simultaneously perform the function where you actually move the divs to their new position in the DOM using insertBefore(). I've never seen a flicker since these functions are near-instant, but if you see an issue you can set visibility to hidden while you reset the position and move the divs, and then reset the visibility afterward

You can even set custom z-indexes for your divs during the animation that you reset on the success callback, allowing you to determine which elements the divs pass over/under or specifying which is on top if they cross each other.

Upvotes: 1

Related Questions