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等价物就可以了。

使用翻译X 测试 .transit 插件：jsFiddle

Answer 2

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

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

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

CSS3获取动画的动态值

2 个答案: