问题

给一个元素设置了transitionDuration（比如2s）和transformOrigin，然后需要2s后给元素设置transform属性，transformOrigin才会生效

相关代码

.div {
  width: 200px;
  height: 200px;
  background-image: linear-gradient(red, green);
}

<div class="div"></div>
<button>click</button>

var btn = document.querySelector('button')
var div = document.querySelector('.div')
btn.onclick = function (params) {
  div.style.transformOrigin = '800px 200px'
  div.style.transitionPproperty = "transform"
  div.style.transitionDuration = "2s"
  div.offsetWidth // 这里我是添加了元素过渡时间和转换基点后，再刷新了浏览器的flush队列
  div.style.transform = 'scale(0)'
}

问题描述

如上设置了过渡时间和转换基点后，再设置缩放，这时候是以默认元素中心进行缩放，并没有按照我设置的原点（800px， 200px）进行缩放

相关代码

var btn = document.querySelector('button')
var div = document.querySelector('.div')
btn.onclick = function (params) {
  div.style.transformOrigin = '800px 200px'
  div.offsetWidth // 这里我是先设置转换基点，然后再设置过渡时间，也可以
  div.style.transitionPproperty = "transform"
  div.style.transitionDuration = "2s"
 
  div.style.transform = 'scale(0)'
  
  // setTimeout(() => {
  //    div.style.transform = 'scale(0)'
  // }, 2000)
}

结果描述

如果我等待2s后，即我设置的过渡时间结束后再对元素进行缩放，这时候元素就会以设置的原点（800px， 200px）进行缩放。
为什么会这样呢，难道transformOrigin