AngularJS Transition on click - angularjs

Question

I am kind of new with angular and I found this way to use ng-click and ng-show to show the div with information in when the user clicks the h3.
The only problem is that it just shows up and I would like is it fades in or slides down to be visible. :)
Is this gonna work or should I do another way??
<div class="col-sm-12">
<div>
<h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe"><i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation</h3>
<hr class="no-margin-top hr-line">
</div>
</div>
<div class="col-xs-12 col-md-offset-3 col-md-9 margin-top" style="border: 1px solid purple" ng-show="showInfoHe">
<div class="row cats-attributes">
<p>info</p>
</div>
</div>

Answer 1

You can do this without ngAnimate,
by using css transitions and ngClass
what you want to do on click set a variable to true and then have a class that has opacity:1.
so
<div class="parent-div" ng-click="yourVariable = true">
<div class="child" ng-class={'opacity-class': yourVariable}>
</div>
</div>
and then in the css
.parent-div {
transition: opacity ease-in-out 1s;
}
.parent-div.child {
opacity:0;
}
.opacity-class {
opacity: 1;
}
EDIT:
here is an applied solution to the html structure you provided
<div class="col-sm-12">
<div>
<h3 class="no-margin-bottom toggleText" ng-click="showInfoHe = !showInfoHe"><i class="fa fa-plus-circle" aria-hidden="true"></i> Hälsoinformation</h3>
<hr class="no-margin-top hr-line">
</div>
</div>
<div class="show-info-container">
<div class="col-xs-12 col-md-offset-3 col-md-9 margin-top show-info" style="border: 1px solid purple" ng-class="{'opacity-class':showInfoHe}">
<div class="row cats-attributes">
<p>info</p>
</div>
</div>
</div>
css
.show-info-container {
transition: opacity ease-in-out 1s;
}
.show-info {
opacity:0;
}
.opacity-class {
opacity: 1;
}
notice i added a container div and removed the ng-show