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

我陷入了这个问题，我有一个div标签，它更新并显示图像列表。我想在从一组图像到另一组图像的过渡中更新div标签中的值时添加动画。AngularJS：更新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部分相应地更新图像。

所以问题是如何添加过渡动画相同的元素，当它被更新，因为我们从来没有离开或进入该元素标签

来源

2017-03-07 arqam

ng-animate将有所帮助，或者您可以即时添加动画类。 https://daneden.github.io/animate.css/ – Aslam

@hunzaboy我的问题不是要添加什么动画。我的问题是如何在转换时添加动画（更新div标签时）。 – arqam

你看过ng-animate文档吗？ – Aslam

你的问题回答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"; 
});

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

来源

2017-03-07 05:32:28

@arqam希望这会为你工作.. –

但我不想当图像加载。我的问题是，当用户滑动并移动到另一个选项卡时，转换应该具有像本机应用程序那样的动画，因此从该组图像到另一组图像的转换应该具有动画。 – arqam

所以你想效果当用户选择不同的图像..我猜你会添加一些类，当用户选择一些你应该有点击事件呢？为什么不尝试 –

以上回答是非常有益的，可能是许多有很大的帮助。

但我的问题的答案是你根本不能。 ngAnimate的ngEnter和ngLeave将无法识别更改，除非元素已更改，而不是元素内部的内容。

所以无论是一些黑客需要应用像使用ngRepeat不同的id's不同更新发生的元素或其他需要做的事情。

来源

2017-04-04 05:59:57 arqam

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

回答

相关问题