Are animations with ng-style possible? (AngularJS)

Question

I have a div set to a dynamic height called option.height using AngularJS's ng-style attribute.

<div class="rec" ng-style="{ 'height': option.height, 'background-color': option.color}"></div>

When the page is loaded, the height may be set to anything from 0px to 300px, depending on earlier user input. While this works, I want the div height to animate from 0px to whatever value option.height is using CSS animations, instead of just starting at the correct height. Is this possible? How should I approach this?

Jones Joseph · Accepted Answer · 2017-06-05 06:25:03Z

5

You can use CSS keyframes with the from property.
This will animate it to the specified height from 0px.

Something like:

@keyframes AnimHeight{
  from{
    height:0px;
  }
}

Example:

.res {
  animation: AnimHeight 0.5s ease;
}

@-webkit-keyframes AnimHeight {
  from {
    height: 0px;
  }
}

@-moz-keyframes AnimHeight {
  from {
    height: 0px;
  }
}

@-o-keyframes AnimHeight {
  from {
    height: 0px;
  }
}

@keyframes AnimHeight {
  from {
    height: 0px;
  }
}

<div class="res" style="height:100px;background:red;width:100%;">
</div>

EDIT : Added all the vendor specifics for keyframes.

answered Jun 5, 2017 at 6:25

Jones Joseph

4,9583 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Are animations with ng-style possible? (AngularJS)

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related