AngularJS：divタグが更新されたときにアニメーションを追加する

Question

divタグが更新され、画像のリストが表示されるこの問題が発生しました。ある画像セットから別の画像セットへの遷移でdivタグの値が更新されたときにアニメーションを追加したい。あなたが底に見ることができるようにここで

は女の子の髪のための画像のセットがあります。ユーザーが別のタブに移動すると、別の画像セットが表示されます。私はその移行でアニメーションが欲しい。

次のように遷移するためのAngularJS部分がある：

JS部に呼び出される関数はそれに応じて画像を更新して

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

。

そこで質問我々は決して残さないか

Answer 1

ご質問はhere

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/実施例は、上記の答えは非常に有用であり、多くのための大きな助けになるかもしれませんここ

Answer 2

可能です。

しかし、私の質問に対する答えはあなたが簡単にできないことです。 ngAnimateのngEnterとngLeaveは、要素が変更されていない限り変更を認識できません。

ngRepeatを別のid'sと異なるように適用する必要があるため、要素に起こるさまざまな更新や何か他の処理が必要です。