CODEWITHSUNDEEP
htmlcssangularjs
user1504605
user1504605

Reputation: 589

Extremely Simple ng-show animation with AngularJS

I do not want an HTML element to pop up without any kind of transition or animation, I'm trying to understand exactly how the AngularJS ngAnimate directive works:

Here's the HTML I would like to appear with an animation:

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

I've already added the 'ngAnimate' to my "angular.module" and the animate library is imported as in Django:

<script src="{% static "bootstrap/js/angular-animate.min.js" %}"></script>

This is the CSS code:

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

And so the CSS aspect is where I'm clueless, I have no idea how to treat the CSS code. The CSS code above has .ng-show added which is not being applied to the anchor tag with the matching class and which also has an ng-show effect.

How can I make it so the css initially has an opacity of 0 until the ng-show is triggered?

Also, what's the best analogy for how Angular animate works? Does each CSS for .list-group-item.media.region_flag_california contain a specific state? such as begining, middle, and end? Kind of like how a video contains frames which show one after the other?

Upvotes: 0

Views: 1276

Answers (1)

EnigmaRM
EnigmaRM

Reputation: 7632

There are a couple of newer libraries that you can use to assist with animations.

  1. NG-FX - These are javascript based animations
  2. ngAnimate.css - These are CSS based animations

Another option is to just use Animate.css (which is what I've typically done in the past). But that requires you to understand what classes are being applied during a show/hide process. You are correct in assuming that there are various states.

OdeToCode.com has an example of using Angular with Animate.css. And he explains the process pretty quickly.

Another explanation (just came across this one): Moving with Angular 1.2 Animation and Animate.css Otherwise, if you want a more in depth look at how ngAnimate works, jessicaspacekat has some good slides on how to design css transitions using angularjs.

This image is taken from her slides (slide 64 of 94) ngShow Animation Cheatsheet

Upvotes: 1

Related Questions