I need an HTML element to smoothly appear with a transition or animation, and I'm diving into the world of AngularJS ngAnimate directive to understand its magic:
Check out this snippet of HTML where I want the animation to take place:
<a ng-show="county_global_var != undefined" class="list-group-item media region_flag_california">
<div class="media-body">
<div ng-show="current_political == 'administrative_area_level_2'">
<h5 style="opacity:0.65;"><span id="default_region" class="label label-primary">{$ county_global_var $}</span></h5>
<span>
<h6><span class="label label-success">NOW IN CHAT</span></h6>
</span>
</div>
<div ng-show="current_political != 'administrative_area_level_2'">
<h5><span id="default_region" class="label label-primary">{$ county_global_var $}</span></h5>
<span>
<h6><span class="label label-default keep-in-front">TAP TO JOIN</span></h6>
</span>
</div>
</div>
<div style="" ></div>
</a>
The next step is adding 'ngAnimate' to my "angular.module" and importing the animate library just like in Django:
<script src="{% static "bootstrap/js/angular-animate.min.js" %}"></script>
This piece of code handles the CSS styling for the animation:
.list-group-item.media.region_flag_california.ng-show
{
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:1;
background-repeat:no-repeat;
background-size:cover;
height:90px;
background-position:center;
}
The CSS part has me scratching my head though, as I'm unsure how to handle it. The .ng-show added in the CSS code doesn't seem to affect the anchor tag that should be animated when ng-show triggers.
How can I set the initial opacity to 0 until ng-show activates?
And could someone explain Angular animate using an analogy? Do the different CSS states for
.list-group-item.media.region_flag_california