Safari 12.1 中的变换原点动画问题答案

【问题标题】：Issue with transform origin animation in Safari 12.1Safari 12.1 中的变换原点动画问题
【发布时间】：2020-01-05 04:31:25
【问题描述】：

根据鼠标水平位置改变 div 的变换原点的简单动画。

在 Safari 12.1 中不显示动画。相反，div 卡在显示它在页面加载时的转换原点（调整浏览器的大小似乎会更新它）。

脚本将正确的值吐出到元素上，并且没有出现任何错误，因此需要一些帮助以使其动画化。

它可以在最新的 Chrome、Firefox 和 Safari 11 中运行，只是最新的 Safari 坏了。

$(document).mousemove(function(getCurrentPos){
    var xCord = getCurrentPos.clientX;
    var xPercent = xCord/window.innerWidth * 100 + "%";
    document.getElementById("p-beam").style.transformOrigin = xPercent + "100%"; 
});

.beams {
  display: block;
  position: relative;
  overflow: hidden;
  height: 600px;
  background-color: #434343;
}

.p-beam {
  position: absolute;
  left: 0;
  top: -360px;
  right: 0;
  bottom: auto;
  width: 100px;
  height: 360px;
  margin-right: auto;
  margin-left: auto;
  background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#eef));
  background-image: linear-gradient(180deg, transparent, #eef);
  -webkit-transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="beams">
  <div id="p-beam" class="p-beam"></div>
</div>

【问题讨论】：

标签： javascript jquery html css css-animations

【解决方案1】：

这看起来像一个错误。

我可以通过更改 bean 的 innerHTML/innerText 来使其工作，我认为这样会强制布局/绘制。

我担心你正在绘制的区域可能太大，即使这是一个错误，这也可能太昂贵并且你正在达到渲染器的限制。但这只是猜测。

我知道这不一样，但也许你可以通过 transform: rotate() 或 transform: matrix() 来完成视觉上相似的事情

const beam = document.getElementById("p-beam");
let i=0;

setInterval(()=>{
  i=(i+1)%100;
  const x = `${i%100}% ${100}%`
  beam.style.transformOrigin = x;
  beam.innerHTML = i;
  //console.log(x)
}, 16);

.p-beam {
  position: absolute;
  left: 0;
  top: -360px;
  right: 0;
  bottom: auto;
  width: 100px;
  height: 360px;
  margin-right: auto;
  margin-left: auto;
  background: yellow;
  
  transform: perspective(360px) rotateX(-104deg) rotateY(0) rotateZ(0);
  
  transform-style: preserve-3d;
  box-sizing: border-box;
}

<div class="beams">
  <div id="p-beam" class="p-beam"></div>
</div>

【讨论】：