ng显示/隐藏延迟与图像动画

Question

所以我的页面有2个按钮，使用ng-click为每个按钮渲染特定的图像。

image 1在页面加载时显示，并且将图像带入视图的动画工作正常。

切换到图像2(通过按钮2)工作良好。动画将图像2拉入视图

但是当点击按钮1，显示图像1时，有一个问题。在单击按钮1时，最初拉到页面上的图像是图像2，大约在将ng-hide应用于图像2时，图像2淡出，图像1现在显示出来，并且似乎一直位于它的后面。

谁有建议或想法，这个问题可能是什么?我一直在网上找资料，没有看到任何和这个完全一样的东西。

注意:这只发生在从图像2到图像1的过渡，而不是从图像1到图像2。

-编辑，这是我的HTML:

<div class="content">
    <div ng-repeat='image in images'>
        <div class="{{image.cls}} select" ng-click="showThis($index)" value="{{image.set}}">
            <label>{{image.title}}</label>
        </div>
        <img ng-show="nowShowing==$index" class="slidedown animated bounceInUp" ng-src="{{image.url}}" alt="{{image.id}}">
    </div>
</div>

• 以及我的新'showThis'功能。页面工作，因为我想它，但只有当我双击每个按钮。

<>之前 $scope.showThis = function (index){ if(index!==$scope.nowShowing){ $scope.nowShowing=null; setTimeout(function() { $scope.nowShowing = index; $scope.images[Math.abs(index-1)].set = 'off' $scope.images[index].set = 'on' }, 500); }

Answer 1

对于OP，我在我的情况下修复了它:

<<p> 问题代码/strong>

<button type="button" class="btn btn-success" ng-disabled="formMenu.$invalid" ng-click="saveMenu('UPDATE', menu.id, formMenu.$valid);">
                                            <span class="glyphicon glyphicon-floppy-disk" aria-hidden="true" ng-show="!ajaxCalls.isInProgress('saveRestaurantMenuDetails' + menu.id)"></span>
                                            <span class="glyphicon glyphicon-refresh glyphicon-spin-animate" aria-hidden="true" ng-show="ajaxCalls.isInProgress('saveRestaurantMenuDetails' + menu.id)"></span>
                                        </button>

<<p> 固定代码/strong>

<button type="button" class="btn btn-success" ng-disabled="formMenu.$invalid" ng-click="saveMenu('UPDATE', menu.id, formMenu.$valid);">
                                            <span aria-hidden="true" class="glyphicon" ng-class="{'glyphicon-floppy-disk': !ajaxCalls.isInProgress('saveRestaurantMenuDetails' + menu.id), 'glyphicon-refresh glyphicon-spin-animate' : ajaxCalls.isInProgress('saveRestaurantMenuDetails' + menu.id) }"></span>
                                        </button>

所以基本上有两个不同的SPAN并显示它们是互斥的，我把ng类放在单个SPAN上，这似乎解决了这个问题，即使它是动画的。我敢肯定，它仍然造成延迟由于动画，但嘿，至少我没有看到两个图像，只有一个图标应该显示在同一时间。

Answer 2

没有看到你的代码很难看到你的问题到底是什么，但根据你的描述，听起来你实际上需要设置两个图像隐藏，以允许过渡完成，然后设置下一个图像超时。这是一个使用角度运动动画的工作柱塞。

http://plnkr.co/edit/oDARTE67Iqkdm81mT1RG

至于你的按钮没有显示预期的图像，我需要看到你的代码提供一个解决方案。