Question

我目前正在整理一个HTML5 / CSS3 / JS网页，它使用 CSS3过渡来显示（条形）图形数据，但我遇到了一个问题，我在我目前正在努力克服。

这是一个截图：

Interactive Graph

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

每次用户点击不同的图标时，三个彩色条形图从左向右展开（轻松过渡），并在右侧显示数字总计，从零开始连续计数。

我现在已经编写了绝大部分代码来启用所有这些功能，并且我已经设置了一个JSFiddle文件，并为每个人的考虑添加了我的JS：

$(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模型中看到的那样，通过单击紫色（+）图标，三个条形图展开并且数字计数，然后通过单击相同的图标，条形图整齐地退回。完善。注意，我还会及时修改代码，以便灰色数字也可以重新计算为零。

当您点击图标显示条形图然后显示这些条形图（未退回）时，会出现问题，选择不同的紫色图标。这就是问题的开始。现在尝试单击您刚刚选择的图标。空白。您必须在物理上单击此图标两次以重新显示数据。

我猜我需要以某种方式删除并重新添加条形图＆＃39;通过JS的类将CSS3动画重置回到开头，所以每当我在图标之间进行选项时它们都会播放，但到目前为止我还在努力让它工作。

任何帮助都会很棒。

Answer 1

您的问题出在hide（）和show（）方法中。它们是使用在调用之前切换的活动类完成的。我建议将该部分移动到CSS中。

看到这个小提琴：

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

http://jsfiddle.net/QPLkt/

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

1 个答案: