为什么 CSS3 过渡只用一次答案

【问题标题】：Why CSS3 transition do no work more than one time为什么 CSS3 过渡只用一次
【发布时间】：2012-08-16 09:02:29
【问题描述】：

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

【问题讨论】：

您正在进入CSS Animations 的域。（其中有个不错的小东西叫animation-iteration-count:infinite。）
嗨，ACJ，感谢您的评论，但您是否看过jsfiddle.net/4TxqZ/4 我使用的是过渡而不是动画属性。我想要的只是找出为什么当我单击其他选项卡并单击返回时过渡动画只运行一次，它不再运行，它只显示图表。
它将在新页面加载时再次运行，而不是在您单击其他浏览器选项卡并返回时再次运行，这很明显。
嗨，韩，我明白了，但是当点击其他选项卡时，我使用此函数将图表设置回起始位置 resetLocalize() { $(".bar1.localize").stop( ).css({ 底部：-180 }); $(".bar2.localize").stop().css({ bottom: -215 }); $(".bar3.localize").stop().css({ bottom: -225 }); } 并且当单击返回选项卡时，它应该使用此功能再次运行动画作为逻辑 localize() { $(".bar1.localize, .bar2.localize, .bar3.localize").stop(); $(".bar1.localize, .bar2.localize, .bar3.localize").css({ 底部: 0 }); } 但它不会再次运行，只是出现。

标签： jquery css css-transitions transition

【解决方案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/

【讨论】：