当代码是连续的时，CSS3转换不工作

您将如何顺序激活CSS3转换？ 我正在尝试以下方法：

<script type="text/javascript">
    var sample = $('<div style="text-align:center;">hello</div>');
    sample.appendTo($('body'));

    sample.css('transform', 'scale(1.0)');
    sample.css('transition', 'all 1s ease-in-out');
    sample.css('transform', 'scale(2.0)');
</script>

变量样本=$（'hello'）；
样本.附录（$（'body'））；
css（'transform'，'scale（1.0）'）；
css（'transition'，'all 1s ease in out'）；
css（'transform'，'scale（2.0）'）；

它完全忽略了转换，只设置了比例。

来自Mozilla的文档：

之后立即使用过渡时也应小心 使用.appendChild（）将元素添加到DOM或删除其 显示：无；财产。这被视为初始状态为 从未发生，元素始终处于其最终状态。容易的 克服此限制的方法是应用 更改要更改的CSS属性之前的几毫秒 过渡到

因此，解决方案最终是：

<script type="text/javascript">
    var sample = $('<div style="text-align:center;">hello</div>');
    sample.appendTo($('body'));

    sample.css('transform', 'scale(1.0)');
    sample.css('-moz-transition', 'all 1s ease-in-out');

    setTimeout(function () {
        sample.css('transform', 'scale(2.0)');
    }, 10);
</script>

变量样本=$（'hello'）；
样本.附录（$（'body'））；
css（'transform'，'scale（1.0）'）；
css（'-moz transition'，'all 1s ease in-out'）；
setTimeout（函数（）{
css（'transform'，'scale（2.0）'）；
}, 10);