1

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

                /* 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名称？

4

2 回答 2

3

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

例子：

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

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

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

于 2012-06-17T04:25:28.903 回答
0

例如，您可以使用 CSS 表达式将 JS 值设置到您的 CSS 类中

height:expression(document.body.clientHeight + "px");

这就是我们编写 CSS 表达式的方式。

于 2012-06-17T04:39:18.377 回答