Question

所以我正在构建一个图库，在其中我使用Bounce.js放大和缩小图像，它使用css3动画（特别是matrix3d转换）来完成这项工作。一旦图像完成放大/缩小，我实际上想要删除动画并将最终的css属性设置为元素本身，这样我就可以做一些事情，比如移动它，它的真实属性而不是旧的（那些）在对象动画之前，由于脚本没有改变它们而停留在那里。）

所以用几句话，如何才能了解对象实际上是如何看待动画的？我自己试着猜测它，计算最终状态给定转换类型和其余部分价值观，但让我头疼，我不知道该怎么做。

我尝试过的所有东西都不能很好地运行，而且我更容易在没有尝试计算它们的情况下立即获得这些值。

注意我还希望能够获得top/bottom和left/right值，因为元素位于absolute，这对我来说非常重要。

这是动画：

@keyframes animation { 
  0% { -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.5% { -webkit-transform: matrix3d(1.14531, 0, 0, 0, 0, 1.14531, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.14531, 0, 0, 0, 0, 1.14531, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% { -webkit-transform: matrix3d(1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  37.5% { -webkit-transform: matrix3d(1.20818, 0, 0, 0, 0, 1.20818, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.20818, 0, 0, 0, 0, 1.20818, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { -webkit-transform: matrix3d(1.20447, 0, 0, 0, 0, 1.20447, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.20447, 0, 0, 0, 0, 1.20447, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  62.5% { -webkit-transform: matrix3d(1.20122, 0, 0, 0, 0, 1.20122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.20122, 0, 0, 0, 0, 1.20122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75% { -webkit-transform: matrix3d(1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  87.5% { -webkit-transform: matrix3d(1.19982, 0, 0, 0, 0, 1.19982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.19982, 0, 0, 0, 0, 1.19982, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { -webkit-transform: matrix3d(1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform: matrix3d(1.2, 0, 0, 0, 0, 1.2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

似乎很容易计算，因为它只是乘以1.2，但由于它是absolute定位的，因此在动画之后很难找到顶部和左边的值。

Answer 1

也许使用$("#yourelement").position()来获取元素的当前位置。

一旦我尝试了你的动画，它对我有用。如果元素偏移量超出屏幕，它还会提供负值。

它返回一个具有两个值的对象，top和left。

使用jQuery的CSS3转换值

1 个答案: