如何使不透明过渡从其当前状态开始，即使它当前正受到过渡的影响？

<div id="myElement" class="element">Hello, World!</div>

.element {
  opacity: 0.5;
  transition: opacity 1s ease-in-out;
}

document.getElementById('myElement').addEventListener('click', function() {
  var element = this;
  var currentOpacity = window.getComputedStyle(element).opacity;

  // 设置一个新的透明度值，这里假设我们要完全透明
  element.style.opacity = 0;

  // 使用setTimeout确保浏览器已经应用了新的样式
  setTimeout(function() {
    element.style.transition = 'none'; // 禁用过渡以立即应用新值
    element.style.opacity = currentOpacity; // 恢复到当前透明度
    element.offsetHeight; // 触发重排
    element.style.transition = 'opacity 1s ease-in-out'; // 重新启用过渡
    element.style.opacity = 0; // 开始新的过渡
  }, 50);
});