更改一些没有转换的CSS值，然后在转换后立即更改

Question

情况如下：

我有一个元素必须在没有过渡的情况下移动到某个地方，然后立即移动到另一个但现在进行过渡。

首先，我试过这样：

var transform = Modernizr.prefixed('transform'),
    transition = Modernizr.prefixed('transition'),
    style1 = {},
    style2 = {};

style1[transform] = "translate(100px, 20px)";
style1[transition] = "none"; 
style2[transform] = "translate(500px, 50px)";
style2[transition] = "2s"; 

$('div')
    .on('click', function () {
        $(this)
          .css(style1)
          .css(style2);
    });

http://jsfiddle.net/trajektorijus/vUUb5/2/

但那没有做到这一点......有人可以解释为什么吗？

我设法做了我想做的事，但我认为这不是正确的做法：

var transform = Modernizr.prefixed('transform'),
    transition = Modernizr.prefixed('transition'),
    style1 = {},
    style2 = {};

style1[transform] = "translate(100px, 20px)";
style1[transition] = "none"; 
style2[transform] = "translate(500px, 50px)";
style2[transition] = "2s"; 

$('div')
    .on('click', function () {
        $(this)
            .css(style1)
            .delay()
            .queue(function () {
                $(this)
                    .css(style2)
                    .dequeue();
            });
    });

http://jsfiddle.net/trajektorijus/vUUb5/3/

你能提出比这更聪明的东西吗？

谢谢！

编辑：另一种选择是：

var $this = $(this);

$this.css(style1);
setTimeout(function () { $this.css(style2); });

http://jsfiddle.net/trajektorijus/vUUb5/5/

Answer 1

这样的东西？

http://jsfiddle.net/vUUb5/4/

$(function () {
    $('div').on('click', function () {
        $(this).css({top: '20px', left: '100px' })
            .animate({ top: '50px', left: '500px' }, 2000);
    });
});