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