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

ng-animate will help OR you can add animation classes on the fly. daneden.github.io/animate.css — Aslam
– Aslam, Commented Mar 7, 2017 at 5:20
@hunzaboy My question is not what animation to add. My question is how to add animation while transitioning (when div tag is updated). — arqam
– arqam, Commented Mar 7, 2017 at 5:27
@hunzaboy Yeah, things like ngEnter, ngLeave etc are working fine when changing the element tag but not in the same tag element. Don't know which other thing to use. — arqam
– arqam, Commented Mar 7, 2017 at 5:37

Community · Accepted Answer · 2017-05-23 12:09:44Z

5

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

edited May 23, 2017 at 12:09

CommunityBot

11 silver badge

answered Mar 7, 2017 at 5:32

Abdullah Al Noman

2,8884 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

arqam Over a year ago

But I don't want when the image is loaded. My problem is that when the user is swiping and moving to the other tab, the transition should have the animation like a native app, so the transition from this set of image to the other set of image should have the animation.

Abdullah Al Noman Over a year ago

so you want effect when user selects a different image .. I am guessing you will add some class when the user selects something you should have on click event for that ? why not try that

arqam Over a year ago

Like on top of the image list you see the tabs, right, so when transitioning from one tab to another the list of images down changes. There the transition and animation happen.

Abdullah Al Noman Over a year ago

so you have tab changing event ?? why dont you add animation when new page or div is loaded on-load event ?

arqam Over a year ago

Not a new div is added, just that the Customizable div is updated with the respective images.

|

arqam · Accepted Answer · 2017-04-04 05:59:57Z

0

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.

answered Apr 4, 2017 at 5:59

arqam

3,8096 gold badges40 silver badges76 bronze badges

Collectives™ on Stack Overflow

AngularJS : Adding animation when div tag is updated

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related