2

我正在尝试将 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;
}

我似乎遇到的问题很奇怪。style 属性在background-positionWebkit 和 Firefox 中可以毫无问题地进行动画处理（而且看起来不错）。然而，heightstyle 属性根本没有动画（事实上，当值第一次改变时会引起一些奇怪的问题）。

有没有人遇到过这个？在我看来，它的height行为方式应该与background-position从一个内联样式值平滑过渡到下一个的方式相同，但这里的情况似乎并非如此。我遇到了一些油漆问题还是什么？我知道我可以使用 jQuery 或纯 Javascript 作为后备，但我宁愿不必这样做，除非我绝对必须这样做。

谢谢你的帮助！

4

2 回答 2

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');
}
于 2013-09-24T01:21:53.237 回答
0

设置为内联的元素不能具有高度、填充和边距等属性。您需要使用内联块。该元素仍将是内联的，但可以具有高度、边距、填充和其他任何内容。

于 2013-09-21T03:30:40.373 回答