Resetting multiple CSS3 transitions between hidden elements

Problem

I'm currently putting together a HTML5/CSS3/JS web page, which uses CSS3 transitions to display (bar) graphical data, but I have encountered an issue that I'm currently struggling to overcome.

Here's a screenshot:

Interactive Graph

The intention of this web page is to allow my user to quickly tab (using JS) between three different sets of 'data' by clicking on the purple (+) icons, which also have a descriptive tooltip associated with them.

Each time the user clicks on a different icon, the three coloured bar graphs expand from left-to-right (ease transition) and also display a numerical total to the right, which counts up successively from zero.

I have now written the vast majority of the code to enable all of this functionality to take place and I have setup a JSFiddle file and also added my JS for everybody's consideration:

http://jsfiddle.net/d5knF/6/


$(function(stageone) {
$("#stageOne").click(function() {

    $(".stageOneYellowBar").toggleClass("stageOneYellowBarActive");
    $(".stageOneRedBar").toggleClass("stageOneRedBarActive");
    $(".stageOneBlueBar").toggleClass("stageOneBlueBarActive");

    var c1 = new countUp("c1", 0, 53, 0, 2);
    var c2 = new countUp("c2", 0, 69, 0, 2);
    var c3 = new countUp("c3", 0, 16, 0, 2);
    c1.start();
    c2.start();
    c3.start();


    $(".stageOneYellowBarActive").show();
    $(".stageOneRedBarActive").show();
    $(".stageOneBlueBarActive").show();
    $(".stageTwoYellowBarActive").hide();
    $(".stageTwoRedBarActive").hide();
    $(".stageTwoBlueBarActive").hide();
    $(".stageThreeYellowBarActive").hide();
    $(".stageThreeRedBarActive").hide();
    $(".stageThreeBlueBarActive").hide();
});

});

$(function(stagetwo) {

$("#stageTwo").click(function() {

    $(".stageTwoYellowBar").toggleClass("stageTwoYellowBarActive");
    $(".stageTwoRedBar").toggleClass("stageTwoRedBarActive");
    $(".stageTwoBlueBar").toggleClass("stageTwoBlueBarActive");

    var c1 = new countUp("c1", 0, 71, 0, 2);
    var c2 = new countUp("c2", 0, 112, 0, 2);
    var c3 = new countUp("c3", 0, 41, 0, 2);
    c1.start();
    c2.start();
    c3.start();

    $(".stageOneYellowBarActive").hide();
    $(".stageOneRedBarActive").hide();
    $(".stageOneBlueBarActive").hide();
    $(".stageTwoYellowBarActive").show();
    $(".stageTwoRedBarActive").show();
    $(".stageTwoBlueBarActive").show();
    $(".stageThreeYellowBarActive").hide();
    $(".stageThreeRedBarActive").hide();
    $(".stageThreeBlueBarActive").hide();
});
});

$(function(stagethree) {
$("#stageThree").click(function() {

    $(".stageThreeYellowBar").toggleClass("stageThreeYellowBarActive");
    $(".stageThreeRedBar").toggleClass("stageThreeRedBarActive");
    $(".stageThreeBlueBar").toggleClass("stageThreeBlueBarActive");


    var c1 = new countUp("c1", 0, 32, 0, 2);
    var c2 = new countUp("c2", 0, 117, 0, 2);
    var c3 = new countUp("c3", 0, 85, 0, 2);
    c1.start();
    c2.start();
    c3.start();

    $(".stageOneYellowBarActive").hide();
    $(".stageOneRedBarActive").hide();
    $(".stageOneBlueBarActive").hide();
    $(".stageTwoYellowBarActive").hide();
    $(".stageTwoRedBarActive").hide();
    $(".stageTwoBlueBarActive").hide();
    $(".stageThreeYellowBarActive").show();
    $(".stageThreeRedBarActive").show();
    $(".stageThreeBlueBarActive").show();

});
});

The problem I'm experiencing is with the CSS3 transition behaviour, particularly when clicking between the different icons and I wondered whether anybody had any suggestions or ideas that could help me?

As you can see on my JSFiddle mock-up, by clicking a purple (+) icon, the three bars expand and the numbers count up and then by clicking on the very same icon, the bar neatly retreats back. Perfect. Note, I will also amend the code in time so the grey numbers also count back down to zero.

The problem, you will see, occurs when clicking on an icon to reveal the bars and then with these bars still on display (not retreated), selecting a different purple icon. This is where the problems begin. Now try clicking back on to the icon you just had selected. Blank. You have to physically click this icon twice to re-reveal the data.

I'm guessing I need to somehow remove and re-add the 'bar graph' classes via JS to reset the CSS3 animations back to the beginning so they play each time I tab between icons, but I'm so far struggling to get this to work.

Any help would be brilliant.

Problem courtesy of: Joel

Solution

Your issue is in your hide() and show() methods. They are done using the active classes which are being toggled prior to you calling it. I would recommend moving that portion to your CSS.

See this fiddle:

I added some classes and remove all of your hide() & show() methods

http://jsfiddle.net/QPLkt/

Solution courtesy of: Ken Wheeler

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.