CSS3 使用 jQuery 转换值

Question

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

简单来说，我怎样才能知道一个对象实际上是如何照看一个动画的？我试着自己猜测，计算给定的最终状态转换类型和其余值，但让我头疼，我不知道该怎么办。

我尝试过的所有方法都无法正常工作，而且我可以更轻松地立即获得这些值而无需尝试计算它们。

请注意，我还希望能够获得 top/bottom 和 left/right 值，因为元素被放置 absolutely，这对我来说真的很重要。

这是动画：

@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，但是由于它是absolutely定位的，动画之后很难找到top和left值。

Answer 1

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

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

它returns 一个有两个值的对象，top 和 left。

CSS3 使用 jQuery 转换值

CSS3 transformations values with jQuery

html

css

jquery

webkit