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.
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