title: AngularJS : Adding animation when div tag is updated
body: <p>I am stuck in this problem where I have a div tag which updates and shows a list of images. I want to add animation when the value in the div tag is updated in the transition from one set of images to another.</p>
  
  <p><a href="https://i.stack.imgur.com/PFDHt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PFDHt.png" alt="enter image description here"></a></p>
  
  <p>Here as you can see in the bottom there are a set of images for girl's hair. And when the user goes to other tab, a different set of images comes. I want animation in that transition.</p>
  
  <p>The AngularJS part for the transition is as follows : </p>
  
  <pre><code>&lt;div ng-swipe-left="avDesignController.onSwipeLeftAction()" ng-swipe-right="avDesignController.onSwipeRightAction()"&gt;
      &lt;!-- CUSTOMIZABLE TAB BAR --&gt;
      &lt;div class="tab-bar-container" &gt;
          &lt;div class="scrollmenutab"&gt;
  
              &lt;!-- CUSTOMIZABLE MENU --&gt;
              &lt;div ng-repeat="customizable in customizables"
                   ng-click="avDesignController.onCustomizableClicked($event)"
                    style="display: inline;"&gt;
                      &lt;a ng-if="customizable.allowed == 1"&gt;
                          &lt;div ng-class="{selected: $index==currentIndex}"&gt;
                              &lt;div ng-if="customizable.name == 'Hair'"&gt;
                                  &lt;img class="scrollmenutab-icon"
                                                      id="{{customizable.name}}-{{$index}}"
                                                      src="/app/app_resources/icons/{{genderImage}}Hair.png"&gt;
                              &lt;/div&gt;
                              &lt;div ng-if="customizable.name != 'Hair'"&gt;
                                          &lt;img class="scrollmenutab-icon"
                                              id="{{customizable.name}}-{{$index}}"
                                              src="/app/app_resources/icons/{{customizable.name}}.png"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/a&gt;
              &lt;/div&gt; &lt;!-- MENU : END --&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;!-- CUSTOMIZABLES --&gt;
      &lt;div class="avdesign-item-container" id="avdesign-item-container"&gt;
          &lt;div id="four-columns" class="grid-container" &gt;
  
              &lt;!-- LOAD CUSTOMIZABLES IF NOT LAST ITEM IN TAB --&gt;
              &lt;ul ng-if="currentIndex &lt; (customizables.length - 1)"
                  class="rig columns-4"&gt;
                  &lt;li ng-repeat="customizableItem in currentCustomizable.customizable_item"&gt;
                      &lt;img class="tab-icon"
                           src="/app/app_resources/resources/av/{{avatarInfo.name}}/as/{{customizableItem.as}}"
                           id="customizable-{{$index}}"
                           ng-click="avDesignController.onCustomizedItemClicked($event)"
                           ng-class="{highlight: customizableItem.id==currentID}"&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
  
              &lt;!-- LOAD OUTFITS (FROM avatarOutfit) IF LAST ITEM IN TAB --&gt;
              &lt;ul ng-if="currentIndex == (customizables.length - 1)"
                  class="rig columns-outfit"&gt;
                  &lt;div ng-repeat="brand in outfitBrand" ng-style="{'margin-bottom':'1vh'}"&gt;
              &lt;div class="brand-icon" &gt;
                              &lt;img src="/app/app_resources/icons/{{brand.bg_image}}"&gt;
              &lt;/div&gt;
                  &lt;li ng-repeat="outfit in brand.outfitList"&gt;
                      &lt;img class="outfit-icon"
                           src="/app/app_resources/resources/av/{{avatarInfo.name}}/as/{{outfit.as}}"
                           id="outfit-{{$index}}"
                           ng-click="avDesignController.onOutfitItemClicked($event,$parent.$index)"
                           ng-class="{highlightOutfit: $index==avatar.outfit_index &amp;&amp; $parent.$index==indexParent}"&gt;
                  &lt;/li&gt;
              &lt;/div&gt;
              &lt;/ul&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Where the functions being called in the JS part is updating accordingly the images.</p>
  
  <p><strong>So Question being how to add transition animation for the same element when it is updated because we are never leaving or entering that element tag</strong></p>