jquery - 为什么 CSS3 过渡只用一次

Question

我试图找出并修复为什么 css3 转换只能正常工作一次，然后转换不能工作，这是与 jQuery 不同的动画。有人见过吗？请告诉我原因并提前谢谢！

这是我的代码。

Answer 1

我不认为 .localize 元素的 css 转换在元素未显示时被激活。如果您删除“显示：无！重要；” 从“.ui-tabs .ui-tabs-hide”，它可以正常工作（尽管您看到两个选项卡）。

.ui-tabs .ui-tabs-hide
{
    display: none !important; // remove this line to see what I'm talking about
}

localize() 立即将底部值设置为0，并且由于选项卡被隐藏，因此没有css过渡动画。没有过渡意味着条形图在没有动画的情况下直接跳到“底部：0”。

我已经成功地结合了 localize() 和 resetLocalize()，并在选项卡再次可见后使用短暂的超时设置底部 css，如下所示：

function localize() {
    $(".bar1.localize").css({ bottom: -180 });
    $(".bar2.localize").css({ bottom: -215 });
    $(".bar3.localize").css({ bottom: -225 });

    setInterval(function(){
         $(".bar1.localize, .bar2.localize, .bar3.localize").css({ bottom: 0 });
    },1);
   ;
}

看我的小提琴：http: //jsfiddle.net/jtlowe/4TxqZ/11/