CODEWITHSUNDEEP
jqueryhtmlcsscss-transitions
Caspert
Caspert

Reputation: 4363

How to animate multiple elements at the same time?

I am working on a header animation, when the class collapseTest is added to the header with JS. I have done this and you can see a live example here: http://codepen.io/anon/pen/RPEpyM

Unfortunately, when you take a look at my live code, you will see that the left part, where the menu is positioned, doesn't animate at the same time as the bottom of the green bar beside them. I want to animate both bottoms, the menu square and the green block at the same time. Is this possible? And how can I achieve this?

For the animation I used the css transition property:

-webkit-transition: all 1s ease-in-out 0s;
-moz-transition: all 1s ease-in-out 0s;
-o-transition: all 1s ease-in-out 0s;
transition: all 1s ease-in-out 0s;

I have play with the duration of the transition of both, the menu block and the rest of it (the white and green bar beside the menu), but I can't get it animate synchroon.

I add these animations on the menu, the white bar on the top and the green one below it when the class collapseTest is added to the header element with JS:

function explode() {
    $('header').addClass('collapseTest');
};

setTimeout(explode, 800);

An example of the css declaration:

#header.collapseTest .toggle-menu {
    -webkit-transition: all 0.81s ease-in-out 0s;
    -moz-transition: all 0.81s ease-in-out 0s;
    -o-transition: all 0.81s ease-in-out 0s;
    transition: all 0.81s ease-in-out 0s;
}

If there are any questions, don't hesitate to leave a comment below. Thank you in advance for your time.

Upvotes: 2

Views: 1779

Answers (2)

Alexander Solonik
Alexander Solonik

Reputation: 10230

I found the solution.

You're going to find this hard to believe, but there seems to be an issue in how the transition is taking place. Somehow if you mix % and pixels, the transition, does seem to work in tandem (though its still synchronous).

What I mean by that is, on your navigation, you animate the height and so also on the div.bottom, the problem is one of them has a pixel based height and the other has a % based height. So to get what you want i.e. both the elements should animate in the same way, change the height of both the elements to pixel based or % based.

Change the below style: 

#header > div {
    height: 50%;  // see how this is percentage based 
    width: calc(100% - 180px)!important;
    padding-left: 26px;
    display: table;
}

To:

#header > div {
    height: 75px;  // 75px is = 50% in your case, might hurt responsive design !!
    width: calc(100% - 180px)!important;
    padding-left: 26px;
    display: table;
}

Upvotes: 0

Muzamil Abbas
Muzamil Abbas

Reputation: 702

I have modified your class

#header.collapseTest .top {
height: 0;
margin: -1px;

-webkit-transition: all 0.935s ease-in-out 0s;
-moz-transition: all 0.935s ease-in-out 0s;
-o-transition: all 0.935s ease-in-out 0s;
transition: all 0.935s ease-in-out 0s;
}

.......

As transition complete time for different values are same there for we can do it by reducing speed of one element to adjust the speed .

Or

We can do it by developing a structure inside one element and apply transition on parent element so that the child elements will look great while transition. Thanks

Upvotes: 2

Related Questions