Question

我正在尝试将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样式属性将在Webkit和Firefox中显示没有问题的动画（看起来不错）。但是，height样式属性根本不是动画（实际上，当值首次更改时会导致一些奇怪的问题。）

以前有没有人碰到这个？在我看来，height在从一个内联样式值到下一个样式值的平滑补间方面应该与background-position的行为方式相同，但这似乎不是这里的情况。我遇到了一些油漆问题吗？我知道我可以使用jQuery或普通的Javascript作为后备，但除非我绝对必须这样做，否则我不必这样做。

感谢您的帮助！

Answer 1

好吧，看起来我错了 - 这确实有效，但是以编程方式滚动到页面底部的组合导致了感知过渡的问题。我让它在这里工作（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');
}

Answer 2

设置为内联的元素不能包含高度，填充和边距等属性。您需要使用内联块。该元素仍然是内联的，但可以有高度，边距，填充等等。

CSS过渡：为“高度”样式属性设置内联样式之间的动画

2 个答案: