css animation with angular - html

Question

I seem to have a problem with an animation combined with angular.
I have the following div in my html:
<div class="show-hide" ng-show="questionOfType === '1'">...</div>
and I have the following css:
.show-hide {
-webkit-transition:all linear 2s;
transition:all linear 2s;
}
so what I expected is once questionOfType will be set to 1 I will see the divs content appear with an animation, but It just appears regulary with no animation.
What am I doing wrong?
Thanks in advance.

Answer 1

Unfortunately, CSS transitions cannot animate between display: block and display: hidden, which is what ng-show is toggling.
Instead, you could animate the opacity between 0 and 1:
.show-hide {
-webkit-transition: opacity linear 2s;
transition: opacity linear 2s;
opacity: 0;
}
.show-hide.active {
opacity: 1;
}
And in the markup, toggle the active class I specified above using ng-class:
<div class="show-hide" ng-class="{'active': questionOfType === '1'}" ng-show="questionOfType === '1'">...</div>

Answer 2

You should load $animate as a module :
https://docs.angularjs.org/guide/animations
This is the example from their main page using css (and $animate)
<div ng-init="checked=true">
<label>
<input type="checkbox" ng-model="checked" style="float:left; margin-right:10px;"> Is Visible...
</label>
<div class="check-element sample-show-hide" ng-show="checked" style="clear:both;">
Visible...
</div>
</div>
$animate works in conjunction with your css
again an example from angular docs :
.sample-show-hide {
padding:10px;
border:1px solid black;
background:white;
}
.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.sample-show-hide.ng-hide {
opacity:0;
}
So change to :
<div class="check-element show-hide" ng-show="questionOfType === '1'">....</div>
and have you a model to use to no whether to show or hide?