Javascript CSS转换：在“CSS”的内联样式之间设置动画；高度“；样式属性_Javascript_Css_Css Transitions_Inline Styles

Javascript CSS转换：在“CSS”的内联样式之间设置动画；高度“；样式属性

javascript css

Javascript CSS转换：在“CSS”的内联样式之间设置动画；高度“；样式属性,javascript,css,css-transitions,inline-styles,Javascript,Css,Css Transitions,Inline Styles,我试图使用CSS3转换来实现通过Javascript动态设置的内联样式属性；我正在使用AngularJS进行一个项目，它通过插值在样式标记中使用插值$scope变量，如下所示： <div class="growing-object" style="height: {{myValue}}px; background-position: -{{myValue}}px;"></div> .growing-object { -webkit-transition: bac

我试图使用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作为后备方案，但我宁愿不这样做，除非我必须这样做

谢谢你的帮助

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

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

好吧，看起来我错了-这确实有效，但以编程方式滚动到页面底部的组合导致了感知转换的问题。我在这里找到了它（）并意识到是其他原因导致了这个问题，并找到了一个暂时可行的解决方法

测试用例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>

测试用例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');
}

好吧，看起来我错了-这确实有效，但是以编程方式滚动到页面底部的组合导致了感知转换的问题。我在这里找到了它（）并意识到是其他原因导致了这个问题，并找到了一个暂时可行的解决方法

测试用例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>

测试用例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');
}

你知道这件事吗。内联动画似乎不是很好的做法…@elclanrs我知道这一点-我实际上使用Angular 1.2.0，它内置了对动画的支持。然而，这并不完全是我所需要的-我不需要

ng enter

和

ng leave

-我特别需要在一个增长的对象的高度之间。（这是我正在制作的游戏的一个图形部分。）我编辑了这篇文章，让事情变得更清楚一点。请再次注意，这不是为了显示/隐藏目的-这是针对由于计数器变量而不断增长（以可变速率）的div。您知道吗。内联动画似乎不是很好的做法…@elclanrs我知道这一点-我实际上使用Angular 1.2.0，它内置了对动画的支持。然而，这并不完全是我所需要的-我不需要

ng enter

和

ng leave

-我特别需要在一个增长的对象的高度之间。（这是我正在制作的游戏的一个图形部分。）我编辑了这篇文章，让事情变得更清楚一点。请再次注意，这不是为了显示/隐藏目的-这是针对由于计数器变量而不断增长（以可变速率）的div；它是块级元素上的内联样式声明；它是块级元素上的内联样式声明。