javascript - Angular : Adding animation when div tag is updated

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

您的问题已得到解答here

HTML

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

在 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";
});

和http://jsfiddle.net/2CsfZ/855/此处提供工作示例