Question

我有一个代码，可以使用CSS过渡在屏幕上绘制一个圆，过渡完成后，它会触发其他事件。在下面的代码中，过渡事件不起作用。

第1部分：css

<style>
    .circle {
      transition-property: width, height;
      transition-duration: 2s;
      position: fixed;
      left = 100px;
      top  = 100px;       
      background-color: red;
      border-radius: 50%;        
    } 
  </style>

第2部分：JavaScript：

 <script >  
    function changeRadius(radius) {
  let div = document.createElement('div');   
  div.className = 'circle';  
  document.body.append(div);

  div.style.width = div.style.height = 0;
  console.log(div.style.width);

  div.addEventListener("transitionend", function () {            
    alert('transitionend event!');
  });  

  div.style.width = div.style.height = 2 * radius + 'px'; 
  console.log(div.style.width);       
}

changeRadius(100);

即使“ console.log”显示div的“ width”属性已更改为200px，也不会触发“转换事件”。我必须将setTimeout函数的最后一部分包装如下：

setTimeout(() => {
 div.style.width = div.style.height = 2 * radius + 'px';             
}, 0);

现在可以了！

也许有人知道背后的内在逻辑。我的假设是：实现代码后，即使函数内部的style属性发生变化，也不会将其视为过渡事件。但是，此块外部的更改style属性的代码将起作用，例如'setTimeout'或'mouse hover'等。我想对此进行更深入的解释！

如何创建启动CSS过渡事件？

0 个答案: