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

StackOverflow https://stackoverflow.com/questions/18928409

Question

I am attempting to use CSS3 transitions for inline style attributes that are set dynamically through Javascript; I'm working on a project with AngularJS, which uses interpolated $scope variables inside style tags via interpolation, like so:

<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). However, the height style attribute isn't animating at all (and, in fact, is causing some strange issues when the value first changes).

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. 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.

Thanks for your help!

Was it helpful?

Solution

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.

Test case 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:

function controller($scope) {
    $scope.height = 200;
    $scope.width = 500;

    $scope.bgPos = 0;
}

Test case 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');
}

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top