设置transformOrigin会触发transition过渡吗?

问题

给一个元素设置了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

阅读 1.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题