gpt4 book ai didi

css - 与 Css Translate 一起使用时,getBoundingClientRect 的 X 和 Y 值错误

转载 作者:太空宇宙 更新时间:2023-11-04 06:28:35 26 4
gpt4 key购买 nike

在 React 中,当选择特定图片时,我正在制作从多张图片到一张图片的过渡动画。

我根据原始点击图像的 x 和 y 位置为动画使用以下 CSS。它现在是硬编码的。但是,当放入 css 的翻译时,这些值似乎不正确,我不知道为什么。

我绝对定位了一个具有相同值的 div,这是正确的。但是,translate 的起始值不是我输入的值。

@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

最佳答案

translation 考虑元素的初始位置来平移元素,它表现为偏移量。它不会将元素转换到特定位置。当您使用 top/left 定位元素时,同样的逻辑适用。 top/left 相对于定位元素的包含 block ,以防它是绝对/固定元素。

在这两种情况下,它都是关于原点的偏移量,但每个原点都不相同。

为了更好地理解这里是应用到具有相同值的不同元素的翻译:

.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

当使用 position 和 top/left 时,两者将重叠,因为它们具有相同的包含 block ,因此它们从同一点偏移相同的值。

.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>

关于css - 与 Css Translate 一起使用时,getBoundingClientRect 的 X 和 Y 值错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54874787/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com