javascript - ng-show/hide 延迟图像动画

Question

所以我的页面有 2 个按钮，它们使用 ng-click 来呈现每个按钮的特定图像。

图像 1 在页面加载时显示，将图像带入 View 的动画效果很好。

切换到图像 2(通过按钮 2)工作正常。动画将图像 2 拉入 View

但是在点击按钮 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，我在我的情况下是这样修复的:

有问题的代码

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

固定代码

<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-class 放在单个 SPAN 上，这似乎解决了问题，即使它是动画。我敢肯定，它仍然会因动画而导致延迟，但是嘿，至少我没有看到两个图像一次只能显示一个图标。

希望这对某人有帮助。