AngularJS:更新div标签时添加动画

Question

我遇到了这个问题,我有一个div标签更新并显示图像列表.我希望在从一组图像到另一组图像的过渡中更新div标签中的值时添加动画.

在这里你可以看到底部有一组女孩头发的图像.当用户转到其他选项卡时,会出现一组不同的图像.我希望在那个过渡中有动画.

过渡的AngularJS部分如下:

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

在JS部分中调用的函数相应地更新图像.

所以问题是如何在更新时为同一元素添加过渡动画,因为我们永远不会离开或输入该元素标记

Answer 1

你的问题在这里得到解答

HTML

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

并在控制器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";
});

和http://jsfiddle.net/2CsfZ/855/工作示例在这里可用