在使用jquery设置其他css之前设置css？

我想用jquery添加css转换：

object.css({ 'transition': 'margin 1000ms linear' });

我想在添加过渡之前设置左边距，以便可以将其设置为另一个位置的动画

object.css({
    "margin-left": 700,
});

object.css({
    "transition": "margin 1000ms linear",
    "margin-left": 0,
});

遗憾的是，这不起作用。对象保持在0像素的左边距

如何做到这一点？

请改用动画

object.css({
    "margin-left": 700,
});
object.animate({"marginLeft": 0}, 1000, 'linear');

动画完成后也会收到一个回调，这使得链接动画变得非常棒：

object.animate(
   {"margin-left": 700},
   500,
   'linear',
   function(){
       object.animate({ "margin-left": 0},  1000, 'linear');
    });

---

也许这个解决办法会奏效；它利用CSS关键帧动画。这是我知道如何在不使用超时或其他库的情况下执行此操作的唯一方法。另一种解决方案可能是使用jQuery.transit，如果可以的话；它与jQuery.animate类似，只是它利用了CSS动画。它还向jQuery.css添加了一些方便的CSS3参数

CSS

Javascript

$(document).ready(function() {
    var element = $(".element");

    element.click(function() {
       element.addClass("animate");
    }).bind('oanimationend animationend webkitAnimationEnd', function() {
       element.removeClass("animate");
    });
});

---

这不起作用，因为在将对象移动到700px然后返回到0px后，浏览器会获取转换属性

您可以通过以下方式修复代码：

object.css({
    "margin-left": 700,
});

setTimeout( function() {
    object.css({
        "transition": "margin 1000ms linear",
        "margin-left": 0,
    });
}, 0);

执行第一个css调用，然后代码在setTimeout调用后结束

浏览器刷新页面，对象转到700px

然后，第二个css调用作为setTimeout的回调执行，并获取转换属性和新位置

JavaScript代码再次结束，浏览器刷新页面，缓慢地将对象移动到0px

---

看到这个小提琴：

看起来您可以使用css切换转换，但是您需要重新绘制以使更改生效。使用setTimeout很容易做到这一点，但这会干扰对象链接。另一种方法是快速显示/隐藏元素，我在下面使用过。尝试一下jquery扩展方法：

$.fn.cssNow = function(){
   var $t = $(this),
      _args = Array.prototype.slice.call(arguments,0);
   return this.addClass("trans-none")
              .hide(0, function() {
                  $.fn.css.apply($t, _args);
                  $t.hide(0,function(){
                      $t.show().removeClass("trans-none");
                  });
              });    
}

我选择使用类而不是直接设置css，但只是跳过了保存原始定义的步骤。如果需要，您可以不使用该类，而是使用setProperty，它允许您指定！重要的

然后，假设将对象上的transition设置为start，则您的代码将如下所示：

object
   .cssNow({"margin-left":"700px"})
   .css({"margin-left":"0px"});

---

这里有一把小提琴：

这是一个点击事件。我用setTimeout试过了，效果很好，但我确信有一个比两次调用之间有1ms延迟更好的解决方案。我考虑过这一点，但我想避免它，因为它将是我css文件中唯一的类。我的目标是只使用JS/jQuery来解决它。setTimeout是goI已经做到的方法。我的插件可以选择使用jQuery动画或css转换。jQuery部分是用animate制作的。原始海报知道这一点，但选择了更标准的解决方案。请参阅原始帖子上的评论。在Safari 7和Firefox 30上尝试了JSFIDLE，但不起作用。在我看来，这似乎是一个过于复杂的解决方案……我同意这是一个半复杂的解决方案；然而，这是由于CSS的限制。我刚在FF30和Safari 7中试用过，效果不错。

.trans-none { 
    transition: none !important;
}

object
   .cssNow({"margin-left":"700px"})
   .css({"margin-left":"0px"});