Question

我尝试旋转图像，然后设置它的过渡：“变换2s”。这是我的代码：

var nodeList = document.querySelectorAll(".top-slide-container ul li");
nodeList[0].style.transition = "transform 0s";
nodeList[0].style.transform = "rotateY(90deg)";
nodeList[0].style.transition = "transform 2s";

当我运行此代码时。结果不像我的想法。图像以2秒旋转。任何人都可以解释为什么它没有在0s做到这一点？ javascript是同步编程语言，不是吗？

Answer 1

是的，Javascript同步运行。但浏览器渲染是另一回事。但是，当Javascript执行时，浏览器渲染（以及处理样式实际上是一个单独的过程）通常会被阻止。因此，在浏览器尝试执行更改之前，代码第二行中应用的样式设置将被第四行覆盖。

Answer 2

好的，我看到你对执行逻辑感到有点困惑，所以我可以尝试向你解释一下运行代码时发生的事情。

1。 nodeList [0] .style.transition =＆＃34; transform 0s＆＃34 ;;

这只是为您应用中的指定元素设置转换css规则。

然后你添加了一个很好的csss变换
nodeList [0] .style.transition =＆＃34;变换2s＆＃34;;

嗯，这是在前两行代码之后调用的，但是因为JavaScript＆＃34; read＆＃34;在一小段时间（~1ms）中的一行代码，这几乎会立即覆盖你的第一个断言。

JavaScript在您在texteditor中编写代码的序列中依次执行一行，但是在使用代码更新DOM之前不会等到它。它只是运行，伙计！

Answer 3

Javascript是同步的，但它不是＆＃34;阻塞/锁定＆＃34;用户界面。浏览器将呈现（异步）。

我假设您想在动画结束后更改属性吗？

这是一些用于css动画的库。在那里，他们描述了如何＆＃34;您还可以检测动画何时结束：＆＃34;

＆＃13;

function doSomething(){
  alert('Animation End');
}

$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

＆＃13;

开源库： https://github.com/daneden/animate.css

javascript是同步编程语言，不是吗？

3 个答案: