CODEWITHSUNDEEP
cssangularjs
user3052526
user3052526

Reputation: 681

ngAnimate ngShow Height transition

I am trying a height animation,

in my html i got

<div ng-show="showdiv==true" class="default" ng-animate={show: 'rollup'}>
     This is an error message that can have hell lots of content
</div>

<button ng-click="showdiv=true">Toggle</button>

And my css is as follows

.rollup{
    max-height: 200px;
    overflow: hidden;
    -webkit-transition: max-height 5s;
    -moz-transition: max-height 5s;
    transition: max-height 5s;
}

It seems to be a newbie mistake but i am horrible with css so any pointers to what i can do?

Upvotes: 2

Views: 3207

Answers (1)

buzzsaw
buzzsaw

Reputation: 1486

You need to have a few specific things set in order to have working CSS animations. The below code animates opening and closing using just CSS an no reliance on ng-animate.

CSS:

.default {
  height:0px; 
  background: #e5feff;
  overflow: hidden;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;

}

.rollup{
  height:200px;
  background: #e5feff;
  overflow: hidden;
  -moz-transition: 1s;
  -ms-transition: 1s;
  -o-transition: 1s;
  -webkit-transition: 1s;
  transition: 1s;
}

HTML:

<div ng-class="{'default':!showdiv, 'rollup':showdiv}">
     This is an error message that can have hell lots of content
</div>

<button ng-click="showdiv=!showdiv">Toggle</button>

Here is a plunker with a few different examples of vertical animation and triggers. http://plnkr.co/edit/2yS1dDlKxvoccQt5jneB?p=preview

EDIT: I have updated my plunker to better address your question about ng-animate. If you are using angular 1.1.5 or earlier, you can still use ng-animate. As of version 1.2, the ng-animate directive is deprecated. In the plunker update, I have included a few examples of the current usage of angular-animate.

Upvotes: 3

Related Questions