如何在过渡和没有过渡的情况下实施相同的行动?

时间:2013-09-26 10:00:10

标签: javascript jquery html5 css3

是否有任何解决方案可以在转换和没有转换的情况下使用相同的操作?

CSS

-webkit-transition: all 0.5s ease 0s;
-moz-transition: all 0.5s ease 0s;
-ms-transition: all 0.5s ease 0s;
-o-transition: all 0.5s ease 0s;
transition: all 0.5s ease 0s;

jquery的

$("#transition").click(function(){
    $("#box-progress").css("left", "50%");
});
// This shoudn't show transition;
$("#no-transition").click(function(){
    $("#box-progress").css("left", "50%");
});

演示: - http://jsfiddle.net/sweetmaanu/XcRNd/

1 个答案:

答案 0 :(得分:1)

将过渡放在一个单独的类中,例如:

.apply_transitions {
    /* .. */
    transition: all 0.5s ease 0s;
}

然后,您希望转换为:

$("#box-progress").addClass("apply_transitions").css("left", "50%");

如果您不想要转换,请执行:

$("#box-progress").removeClass("apply_transitions").css("left", "50%");

这意味着默认情况下,除非您添加apply_transitions类,否则没有任何转换。