cssangularjsng-animateng-showng-hide

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


Solution

  • 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