CODEWITHSUNDEEP
javascripthtmlangularjsng-animate
byrdr
byrdr

Reputation: 5477

ng-animate not working with ng-show

I have ng-animate working on my ng-view; however, I can't seem to get it working for ng-show. I would like to fade in a sub-section inside the ng-view.

Here is my html:

<section id="content" ng-show="!isSpanish">   
   <item-list page="page" is-spanish="isSpanish" info="info" list="list" api="api" objects="objects"></item-list>
   <item-content page="page" staff="staff" info="info" blog-items="list" list="objects" api="api" overview="filteredOverview" is-spanish="isSpanish" partner="partner"></item-content>
</section>

Here is my css:

#content.ng-hide-add.ng-hide-add-active,
#content.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 5s;
  transition: all linear 5s;
}

Is there anything that would prevent this from working correctly?

Upvotes: 0

Views: 323

Answers (2)

KreepN
KreepN

Reputation: 8598

My Solution in Daniles plunkr

Note: I changed it to 5s so you could see the effect of the opacity of 0 when hidden. The nganimate toggles it to 1 via the show and vice versa. Once you see this you may change the ther transition properties freely.

Try this, add this below you css : 

#content.ng-hide-add.ng-hide-add-active,
#content.ng-hide-remove.ng-hide-remove-active {
   -webkit-transition: all ease-in-out 5s;
   -moz-transition: all ease-in-out 5s;
   -ms-transition: all ease-in-out 5s;
   -o-transition: all ease-in-out 5s;
    transition: all ease-in-out 5s;  
}

#content.ng-hide {     
   line-height: 20px;
   -ms-opacity: 0;
   opacity: 0;
   padding: 0 0px;  
}

Upvotes: 1

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

I think you need to css changes like this

#content.ng-hide-add.ng-hide-add-active,
#content.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
  line-height: 20px;
  padding: 6px;
}

#content.ng-hide {
  line-height: 0;
  opacity: 0;
  padding: 0 10px;
}

Working Plunkr

Upvotes: 0

Related Questions