AngularJS : Adding animation when div tag is updated

Question

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.

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.

The AngularJS part for the transition is as follows :

<div ng-swipe-left="avDesignController.onSwipeLeftAction()" ng-swipe-right="avDesignController.onSwipeRightAction()">
    <!-- CUSTOMIZABLE TAB BAR -->
    <div class="tab-bar-container" >
        <div class="scrollmenutab">

            <!-- CUSTOMIZABLE MENU -->
            <div ng-repeat="customizable in customizables"
                 ng-click="avDesignController.onCustomizableClicked($event)"
                  style="display: inline;">
                    <a ng-if="customizable.allowed == 1">
                        <div ng-class="{selected: $index==currentIndex}">
                            <div ng-if="customizable.name == 'Hair'">
                                <img class="scrollmenutab-icon"
                                                    id="{{customizable.name}}-{{$index}}"
                                                    src="/app/app_resources/icons/{{genderImage}}Hair.png">
                            </div>
                            <div ng-if="customizable.name != 'Hair'">
                                        <img class="scrollmenutab-icon"
                                            id="{{customizable.name}}-{{$index}}"
                                            src="/app/app_resources/icons/{{customizable.name}}.png">
                            </div>
                        </div>
                    </a>
            </div> <!-- MENU : END -->

        </div>
    </div>

    <!-- CUSTOMIZABLES -->
    <div class="avdesign-item-container" id="avdesign-item-container">
        <div id="four-columns" class="grid-container" >

            <!-- LOAD CUSTOMIZABLES IF NOT LAST ITEM IN TAB -->
            <ul ng-if="currentIndex < (customizables.length - 1)"
                class="rig columns-4">
                <li ng-repeat="customizableItem in currentCustomizable.customizable_item">
                    <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}">
                </li>
            </ul>

            <!-- LOAD OUTFITS (FROM avatarOutfit) IF LAST ITEM IN TAB -->
            <ul ng-if="currentIndex == (customizables.length - 1)"
                class="rig columns-outfit">
                <div ng-repeat="brand in outfitBrand" ng-style="{'margin-bottom':'1vh'}">
            <div class="brand-icon" >
                            <img src="/app/app_resources/icons/{{brand.bg_image}}">
            </div>
                <li ng-repeat="outfit in brand.outfitList">
                    <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 && $parent.$index==indexParent}">
                </li>
            </div>
            </ul>

        </div>
    </div>
</div>

Where the functions being called in the JS part is updating accordingly the images.

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

Answer 1

The above answer is very helpful and might be of a great help for many.

But the answer to my question is you simply can't. ngAnimate's ngEnter and ngLeave will not able to recognize a change unless the element is changed and not what is inside the element.

So either some hack needs to be applied like using ngRepeat with different id's for different updation that happens to the element or something else needs to be done.

Answer 2

Your question is answered here

Html

<div ng-controller="c">
<div id={{my_id}} width={{widthOfOutsideWrapper}} height={{heightOfOutsideWrapper}}>
       <img ng-src="{{src}}" imageonload />
</div>
</div>

and in controller var app = angular.module('app', []);

app.directive('imageonload', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            element.bind('load', function() {
                alert('image is loaded');
                scope.widthOfOutsideWrapper= this.width;
                scope.heightOfOutsideWrapper= this.height;
                scope.my_id = "testing";
            });
        }
    };
});

app.controller('c', function($scope) {
    $scope.src ="https://www.google.com.ua/images/srpr/logo4w.png";
});

and http://jsfiddle.net/2CsfZ/855/ working example is available here