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

CSS Transitions: Animating between inline styles for "height" style attribute

本文关键字：样式 之间 动画 设置 属性 CSS 高度 过渡      更新时间：2023-09-26

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

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

相关文章：