Get the Value of Animating CSS Properties（译）

thanks kirupa

在理想的世界里，JavaScript会默默的坐在餐桌的一边。CSS将安静的坐在另一边。HTML会依旧那么尴尬，但我们不会谈论它。无论怎样，在某种程度上，这种情况存在相当一段时间。人们建造的东西很长一段时间的范围内下降这完美的世界。

现在，web编程已经发生改变。JavaScript和CSS不再是小孩子了。不再像《辛普森一家》中的角色了，它们已经在一个世界里长大，JavaScript和CSS各自的职责已经越来越模糊了：

Animation Img

[ the Simpsons family has aged really well over the years (credit: usps) ]

尤其是动画的到来使这种模糊变得更为显明。因为CSS3的animations和transitions的高性能，今天你看到越来越的纯粹使用CSS创建动画。你也能看到使用CSS和JavaScript结合创建动画。

在本教程，我将提到一个很小但又非常重要的使用JavaScript和CSS交叉创建动画。这一点就是你使用JavaScript分析哪些是CSS的可动画属性。你将和我一样兴奋想知道如何做到这一点。

Let's get started.

The Example

啥都没有变得无聊，有个示例变得更有感觉，所以我们看一个我提及的例子。将鼠标移到蓝色图片上：

注意到当移动图片上，图片向上滑动。当发生滑动时，你应该在图片下方看到迅速变化的一组数字。这个数值是与你看到的滑动动画过程中的元素CSS属性的top值是一致的。

Let's Do This!

当动画运行中，为了获得CSS属性的值，需要搞清两件事。第一个就是该时段的主角，JavaScript函数getComputedStyle。该函数最新的，适应于任意CSS属性。第二件是，搞清何时使用getComputedStyle是非常重要的-尤其是你持续检测一个特殊的属性值。这是第二个难题。

让我们更详细的看看这两个部分。

Say Hello to getComputedStyle

一般情况，你将通过下面这种方式获取指定的CSS属性值：

myElement.style.CSSPropertyName

如果你使用这种方式获取在动画过程中元素的属性值，你将会感到失望。这种方式只能获取定义在每个元素的style对象中的值。换句话说，只是一些显式定义在CSS中的属性值或通过JavaScript赋值的属性。

动画运行中的元素属性值分为两类。一种是普通CSS属性值，另一种是深藏在运行时浏览器内部的值。用浅显的方法如使用style对象元素获取实际的值。你需要更深层次的方式，那就是通过getComputedStyle函数。

该函数用法如下：

var myValue = getComputedStyle(myElement).CSSPropertyName;

通过传入一个要计算的CSS属性的元素为参数，调用getComputedStyle函数。返回一个对象，指定元素的CSS属性名称。该函数返回你要查找元素的最终计算出的一个值。

为了让此更为具体，下面代码就是上面滑动例子中返回top样式属性值的片段：

var textField = document.getElementById("results");
var imageTopPosition = getComputedStyle(image).top;

代码运行时，将获取image元素的top属性值-即使该属性也是在动画运行中。

Knowing When to Check the Property Value

现在你知道怎样获取在动画中的CSS属性值，一个小的难点就是搞清楚什么时候运行包含getComputedStyle的代码。

更可能的是，你要在持续动画中的获取一些属性的值。你可以通过使用的setInterval或使用更棒requestAnimationFrame来完成。因为我们要在它们运行时，处理的动画和控制它们，requestAnimationFrame是专为此事极佳的设计。

然而我不会在这里很详细的介绍这个函数，你从我的requestAnimationFrame教程中，一定可以得到关于它的内容。在这个例子里我要讨论的是怎么用这个函数。

看一下下面的代码：

var requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame ||
                            window.webkitRequestAnimationFrame ||
                            window.msRequestAnimationFrame;

requestAnimationFrame(updateValue);

function updateValue() {
    var imageTopPosition = getComputedStyle(image).top;
    textField.textContent = imageTopPosition;

    requestAnimationFrame(updateValue);
}

注意到updateValue函数中包括了帮助获取CSS任意属性的调用getComputedStyle代码...该用例下，是top。因为requestAnimationFrame函数是同步浏览器的刷新率，在代码调用中更新每一帧的结果。这正是我们所想要的。

This Works Everywhere!

你可能在任意涉及轮循获取一个CSS属性值时使用getComputedStyle。它不仅限于animations和transitions。Don't let the animation-heavy focus of this article keep you from enjoying the breadth of happiness getComputedStyle brings to the table。

Conclusion

以后的动画将是由结合最的CSS和JavaScript来实现。我无法说我已经看到了未来是什么样子或你使用什么技巧和技术将获取成功。在这里，一切只代表现在，虽然知道如何使用JavaScript取得动画属性的值，我很肯定你会在即将到来的几个星期，几个月，甚至几年使用一大堆技术！

翻译水平有限，敬请各位同学批评指正。

The Example

Let's Do This!

Say Hello to getComputedStyle

Knowing When to Check the Property Value

Conclusion

Comments