我在网页中增加动画效果时经常这样做
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: lightblue; padding: 0; margin: 0; } #d { width: 200px; height: 200px; transition: all 3s ease-in-out; background: red; display: none; position: absolute; top: 0; } </style> </head> <body> <div id="d"></div> <script> let element = document.querySelector('#d'); element.style.display = 'inline-block'; element.style.height = '0'; element.style.height = ''; </script> </body> </html>当然上面的代码正常是无法实现过渡动画的, 因为js线程和gui线程是互斥的, js线程运行完, gui线程才能开始运行, 这时gui线程并不能获得height='0’这一过程, dom只会从不显示切换到显示, 没有丝毫动画效果。 但如果js执行过程中设置断点，结果就可能出现不同，如下：
let element = document.querySelector('#d'); element.style.display = 'inline-block'; element.style.height = '0'; debugger element.style.height = '';打开开发者工具，让js执行到断点处，然后放开断点，让程序执行完毕，就会发现动画效果出现了。 一般情况下gui线程会在js线程执行完之后执行，想实现上面的动画效果需要如下执行js
let element = document.querySelector('#d'); element.style.display = 'inline-block'; element.style.height = '0'; setTimeout(function (){ element.style.height = ''; });但js增加断点就造成本不该出现的动画效果出现了，这说明即使js线程没有执行完，被断点阻塞，gui线程也会开始运行。
