CODEWITHSUNDEEP
cssangularjsng-animateng-showng-hide
N.Car
N.Car

Reputation: 492

Using ngAnimate with ng-show/ng-hide

I have this html:

  <div ng-if="true">
    <div ng-show="hideMe">
      <div class="random" ng-include="'template.html'"></div>
    </div>
  </div>

  <br>
  <button ng-click="hideMe = false">hide</button>
  <button ng-click="hideMe = true">show</button>

And then I have this styling:

.random.ng-enter {
  transition: 2s ease all;
  opacity: 0;
  transform: translateY(100%);
}

.random.ng-enter.ng-enter-active {
  opacity: 1;
  transform: translateY(0);
}

.random.ng-leave {
  transition: 10s ease all;
  opacity: 1;
  transform: translateX(0);
}

.random.ng-leave.ng-leave-active {
  opacity: 0;
  transform: translateX(50%);
}

The template: 

<p>a simple paragraph</p>

<div ng-repeat="user in info">
  {{user.nome}}

</div>

When I first load the page, the ng-enter-active works perfectly, but when I use the buttons Hide or Show the ng-enter and ng-leave don't work. Anyone knows what I'm missing?

Thank you :)

Here you have a plunker showing what I just exposed.

DEMO

Upvotes: 0

Views: 323

Answers (1)

Temani Afif
Temani Afif

Reputation: 272901

edit you html like this :

<div ng-if="true">
    <div ng-if="hideMe" class="random">
      <div  ng-include="'template.html'"></div>
    </div>
  </div>

this should work.

The class random should be used with the element that show/hide and it should be with an ng-if

Upvotes: 2

Related Questions