与CSS翻译一起使用时，从getBoundingClientRect中X和Y值错误

Question

在反应中，当选择特定图片时，我正在为从许多图片到一张图片的过渡而动画。

我正在使用以下CSS进行基于原始单击图像的X和Y位置进行动画。现在是硬编码的。但是，当放入CSS翻译中时，这些值似乎已经关闭，我不知道原因。

i绝对定位一个具有相同值的DIV，这是正确的。但是，翻译的起始值不是我要投入的。

@keyframes move-image {
    from {
        transform:  translate( 383.125px, 7.998px) scale(1);
    }
}
.animation {
   animation: move-image 6.6s;
}

这是一个链接。动画CSS在CSS选项卡中。https://codepen.io/nickjsdevelope1/pen/qowepv

Answer 1

翻译考虑翻译元素的Intial元素位置，其行为为偏移。它不会将元素转化为特定位置。当您使用顶部/左/左定位元素时，同一逻辑应用。顶/左相对于位置元素的包含块，以防它是绝对/固定元素。

在这两种情况下，它都偏离了一个原点，但每种原点都不相同。

在这里更好地理解的是应用于具有相同值的不同元素的翻译：

.box {
  width:50px;
  height:50px;
  background:red;
  transform:translate(50px,50px);
}
.box1 {
  width:50px;
  height:50px;
  background:blue;
  transform:translate(50px,50px);
}

<div class="box">
</div>
<div class="box1">
</div>

这两个元素都被x和y轴上的50px从其原始位置取代。

使用位置和顶部/左/左时，两者都会重叠，因为它们具有相同的包含块，因此它们被同一点相同的值所抵消。

.box {
  width:50px;
  height:50px;
  background:red;
  position:absolute;
  top:50px;
  left:50px;
}
.box1 {
  width:50px;
  height:50px;
  background:blue;
  position:absolute;
  top:50px;
  left:50px;
}

<div class="box">
</div>
<div class="box1">
</div>