Question

我正在使用React js。我尝试运行简单的代码：

setTimeout(() => {
       setTimeout(() => {
         const element = document.getElementById(‘circle’)
         element.style.backgroundColor = ‘red’
       }, 3000)
     }, 3000)

'circle'的CSS就是：

width: 100px;
height: 100px;
border-radius: 50%;
background-color: blue;
transition: background-color 2s;

我运行代码并立即更改选项卡或将屏幕最小化，然后等待6秒钟以上，然后返回页面，然后开始过渡。由于某种原因，如果屏幕不清晰，过渡将无法运行。有帮助的人吗？

Answer 1

您描述的行为取决于浏览器because inactive tabs have low priority execution。

在执行“ JS动画”时，您可能需要使用requestAnimation。

更好的方法可能是在transition-delay中使用“ CSS动画”。

Answer 2

使用此代码，为什么要在代码中使用撇号。

    <script>
        setTimeout(() => {
               setTimeout(() => {
                 const element = document.getElementById('circle')
                 element.style.backgroundColor = 'red'
               }, 3000)
             }, 3000)
        </script>

Answer 3

实际上，这对我没有帮助。我提出的解决方案是聆听“焦点”和“模糊”，并停止任何动画处理和模糊计时器，并从焦点的最后一点继续。

CSS过渡不会在模糊屏幕上开始

3 个答案: