我正在尝试将CSS3过渡用于通过Javascript动态设置的内联样式属性;我正在使用 AngularJS 进行一个项目，该项目通过插值在样式标签中使用内插$scope变量，如下所示：
<div class="growing-object" style="height: {{myValue}}px; background-position: -{{myValue}}px;"></div>
我定义了一个过渡类，如下所示：
.growing-object {
-webkit-transition: background 1000ms ease-out, height 1000ms ease-out;
-moz-transition: background 1000ms ease-out, height 1000ms ease-out;
-ms-transition: background 1000ms ease-out, height 1000ms ease-out;
-o-transition: background 1000ms ease-out, height 1000ms ease-out;
transition: background 1000ms ease-out, height 1000ms ease-out;
}
我似乎遇到的问题很奇怪。background-position style属性在Webkit和Firefox中可以毫无问题地进行动画处理（而且看起来不错）。但是，height style 属性根本没有动画（事实上，当值第一次更改时，会导致一些奇怪的问题）。
以前有人遇到过这种情况吗？在我看来，height的行为方式应该与background-position在一个内联样式值平滑补间到下一个内联样式值方面相同，但这里似乎并非如此。我是否遇到了一些油漆问题或其他问题？我知道我可以使用jQuery或普通Javascript作为后备，但我宁愿不必这样做，除非我绝对必须这样做。
感谢您的帮助！
好吧，看起来我错了 - 这确实有效，但是以编程方式滚动到页面底部的组合导致了感知过渡的问题。我让它在这里工作（http://jsfiddle.net/jDZfY/），并意识到其他原因导致了问题，并找到了一种现在似乎有效的解决方法。
测试用例 HTML：
<body data-ng-app="">
<div data-ng-controller="controller">
<div class="background transition" style="width: {{width}}px; height: {{height}}px; background-position: {{bgPos}}px 0px;">
</div>
<button data-ng-click="bgPos = bgPos + 50">Change background position</button>
<button data-ng-click="height = height + 50">Change height</button>
</div>
</body>
测试用例 JS：
function controller($scope) {
$scope.height = 200;
$scope.width = 500;
$scope.bgPos = 0;
}
测试用例 CSS：
.transition {
-webkit-transition: background 1000ms ease-out, height 1000ms ease-out;
-moz-transition: background 1000ms ease-out, height 1000ms ease-out;
-ms-transition: background 1000ms ease-out, height 1000ms ease-out;
-o-transition: background 1000ms ease-out, height 1000ms ease-out;
transition: background 1000ms ease-out, height 1000ms ease-out;
}
.background {
background: url('http://placehold.it/100x100');
}
设置为内联的元素不能具有高度、填充和边距等属性。您需要使用内联块。该元素仍将是内联的，但可以具有高度、边距、填充和其他任何内容。