CSS Transitions：在“ height”样式属性的内联样式之间进行动画处理
[英]CSS Transitions: Animating between inline styles for “height” style attribute
问题描述
I am attempting to use CSS3 transitions for inline style attributes that are set dynamically through Javascript; 
我正在尝试将CSS3过渡用于通过Javascript动态设置的内联样式属性； I'm working on a project with AngularJS, which uses interpolated $scope variables inside style tags via interpolation, like so: 我正在使用AngularJS开发一个项目，该项目通过插值在样式标签内使用插值的$ scope变量，如下所示：
<div class="growing-object" style="height: {{myValue}}px; background-position: -{{myValue}}px;"></div>
I have defined a transition class, like so: 我定义了一个过渡类，如下所示：
.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;
}
The problem I seem to be running into is strange. 我似乎遇到的问题很奇怪。 The background-position style attribute will animate with no problem in Webkit and Firefox (and it looks good). 在Webkit和Firefox中， background-position style属性将动画化（看起来不错）。 However, the height style attribute isn't animating at all (and, in fact, is causing some strange issues when the value first changes). 但是， height样式属性根本没有动画（实际上，当值第一次更改时，这会引起一些奇怪的问题）。
Has anyone ever run into this before? 有人遇到过吗？ It seems to me that height should behave the same way as background-position in terms of smoothly tweening from one inline style value to the next, but that doesn't seem to be the case here. 在我看来，就从一个内嵌样式值到下一个内嵌样式值的平滑过渡而言， height应与background-position具有相同的行为，但在这里似乎并非如此。 Am I running into some paint issues or something? 我是否遇到一些油漆问题？ I'm aware that I can use jQuery or plain Javascript as a fallback, but I'd rather not have to do that unless I absolutely have to. 我知道我可以使用jQuery或纯Javascript作为后备，但除非绝对必要，否则我不必这样做。
Thanks for your help! 谢谢你的帮助！
2 个解决方案
解决方案1
1 已采纳 2013-09-24 01:21:53
Well, it looks like I was wrong - this was indeed working, but the combination of scrolling to the bottom of the page programmatically was causing issues with the perceived transition. 好吧，看来我错了-确实可以，但是以编程方式滚动到页面底部的组合导致了感知过渡的问题。 I got it working here ( http://jsfiddle.net/jDZfY/ ) and realized that something else was causing the issue, and found a workaround that seems to be working for now. 我在这里（ http://jsfiddle.net/jDZfY/ ）使它工作，并意识到导致此问题的其他原因，并找到了目前似乎可行的解决方法。
Test case HTML: 测试用例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>
Test case JS: 测试用例JS：
function controller($scope) {
$scope.height = 200;
$scope.width = 500;
$scope.bgPos = 0;
}
Test case CSS: 测试用例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');
}
解决方案2
0 2013-09-21 03:30:40
Elements set to inline can't have properties like height, paddings and margins. 设置为内联的元素不能具有高度，内边距和边距之类的属性。 You need to use inline-block. 您需要使用内联块。 The element will still be inline, but can have height, margins, padding and anything else. 元素仍将是内联的，但可以具有高度，边距，边距和其他任何内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.