javascript - 重置隐藏元素之间的多个 CSS3 过渡

Question

我目前正在制作一个 HTML5/CSS3/JS 网页，它使用 CSS3 转换 来显示(条形)图形数据，但我遇到了一个目前正在努力解决的问题克服。

这是屏幕截图:

此网页的目的是允许我的用户通过单击紫色 (+) 图标(也有与之关联的描述性工具提示)在三组不同的“数据”之间快速切换(使用 JS)。

每次用户单击不同的图标时，三个彩色条形图都会从左到右扩展(轻松过渡)，并且还会在右侧显示数字总计，该数字总计从零开始依次递增。

我现在已经编写了绝大多数代码来实现所有这些功能，并且我设置了一个 JSFiddle 文件，并添加了我的 JS 供大家考虑:

<强> 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();

});
});

我遇到的问题是 CSS3 转换行为，特别是在不同图标之间单击时，我想知道是否有人有任何建议或想法可以帮助我？

正如您在我的 JSFiddle 模型中看到的那样，通过单击紫色 (+) 图标，三个条形图会展开并且数字会累加，然后通过单击同一个图标，该条形图会整齐地退回。完美的。注意，我也会及时修改代码，让灰色的数字也倒数到零。

您将看到，当单击一个图标以显示条形图，然后在这些条形图仍然显示(未撤回)的情况下，选择另一个紫色图标时，就会出现问题。这就是问题开始的地方。现在尝试单击返回您刚刚选择的图标。空白的。您必须单击该图标两次才能重新显示数据。

我猜我需要通过 JS 以某种方式删除并重新添加“条形图”类，以将 CSS3 动画重置回开头，以便每次我在图标之间切换时它们都会播放，但到目前为止我还在挣扎让它发挥作用。

任何帮助都会很棒。

Answer 1

您的问题出在您的 hide() 和 show() 方法中。它们是使用在调用它之前正在切换的事件类来完成的。我建议将该部分移至您的 CSS 中。

看这个 fiddle :

我添加了一些类并删除了所有 hide() 和 show() 方法

http://jsfiddle.net/QPLkt/