当代码是顺序的时，CSS3 转换不起作用

Question

您将如何按顺序激活 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>

它完全忽略过渡，只设置比例。

Answer 1

来自 Mozilla 的文档:

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Care should also be taken when using a transition immediately after adding the element to the DOM using .appendChild() or removing its display: none; property. This is seen as if the initial state had never occured and the element was always in its final state. The easy way to overcome this limitation is to apply a window.setTimeout() of a handful of milliseconds before changing the CSS property you intend to transition to.

所以解决方案最终是:

<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>