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

在使用后立即过渡时也要小心使用.appendChild（）将元素添加到DOM或删除它 display：none;属性。这被视为初始状态从未发生过，元素总是处于最终状态。很容易克服这个限制的方法是应用一个window.setTimeout（）在更改您想要的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>

代码顺序时CSS3转换不起作用

1 个答案: