CODEWITHSUNDEEP
angularjsangularjs-directive
sisimh
sisimh

Reputation: 1337

ng-if does not add behaviour while ng-show does

Case :

<div class="slide" ng-show="condition" >

I have a directive set as class that gives the slide behavior to the div when it shows.
When i use ng-if instead of ng-show so that the code does not get executed unless the condition really applies, the slide behavior is not working anymore, while with ng-show it works .

Is there a work around this? timeout maybe?

<div class="slide" ng-if="condition" >

Upvotes: 1

Views: 323

Answers (2)

Blaise
Blaise

Reputation: 13489

This is as expected. ngIf animations are defined differently than ngShow animations.

The proper way to do animations is to include the ngAnimate module and then include animations CSS for each of the directives you want to animate (like ngIf, ngShow, ngRepeat). 

/* ng-if */
.slide.ng-enter, 
.animate-if.ng-leave {
  transition: all 1s;
}

.slide.ng-enter,
.slide.ng-leave.ng-leave-active {
  transform: translateX(-100px);
}

.slide.ng-leave,
.slide.ng-enter.ng-enter-active {
  transform: translateX(0);
}

/* ng-show */
.slide {
  transform: translateX(0);
}

.slide.ng-hide-add.ng-hide-add-active,
.slide.ng-hide-remove.ng-hide-remove-active {
  transition: all 1s;
}

.slide.ng-hide {
  transform: translateX(-100px);
}

Upvotes: 1

chiragchavda.ks
chiragchavda.ks

Reputation: 530

Try this code

 <div ng-class="{slide: true}" ng-if="condition" >

Upvotes: 1

Related Questions