javascript - CSS3 获取动画的动态值

Question

我有以下代码，可以简单地在屏幕上移动我的图像:

                /* This is the animation code. */
        @-webkit-keyframes example {
   from { -webkit-transform: translateX(0px); }
   to   { -webkit-transform: translateX(1900px) }
}

        /* This is the element that we apply the animation to. */
        img#container {
            -webkit-animation: example 1s ease 0s 1 normal;
        }

我无法解决的问题是将 translateX 动画值设置为用 javascript 计算的值，例如屏幕中心的 x 位置。有没有办法在 javascript 中设置“to”属性，然后应用 id 名称？

Answer 1

要设置 CSS3 转换值，请考虑使用 jQuery 和 .transit插入。该网页演示了不同的 CSS3 动画效果。

示例:

$('#container').transition({ x: '1900px' });

查看他们的 source code ，你会发现在 jQuery 中做各种效果是乏味的，因为需要大量的相关样式信息来创建所需的输出。然后将该 jQuery 转换为纯 JavaScript 等价物是值得一看的。

使用translate X测试.transit插件:jsFiddle