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

Question

我想用 jquery 添加一个 css 转换:

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

我想在添加过渡之前设置 margin-left，这样我就可以将它设置为另一个位置的动画。

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

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

很遗憾，这不起作用。对象保持在 0px margin-left。

如何做到这一点？

Answer 1

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

http://jsfiddle.net/9xw6V/

CSS

.element {
    width: 100px;
    height: 100px;
    background-color: #ff9933;
}

.animate {
    -webkit-animation: slide 5s; /* Safari 4+ */
    -moz-animation:    slide 5s; /* Fx 5+ */
    -o-animation:      slide 5s; /* Opera 12+ */
    animation:         slide 5s; /* IE 10+ */
}

@-webkit-keyframes slide {
  0%   { margin-left: 100px; }
  100% { margin-left: 0px; }
}
@-moz-keyframes slide {
  0%   { margin-left: 100px; }
  100% { margin-left: 0px; }
}
@-o-keyframes slide {
  0%   { margin-left: 100px; }
  100% { margin-left: 0px; }
}
@keyframes slide {
  0%   { margin-left: 100px; }
  100% { margin-left: 0px; }
}

Javascript

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

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