Question

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

页面加载时会显示

图像1，并且使图像进入视图的动画可以正常工作。

切换到图像2（通过按钮2）工作正常。动画将图像2拉入视图

但是点击按钮1，显示图像1时出现问题。最初在点击按钮1上拉到页面上的图像是图像2，当ng-hide应用于图像2时，图像2淡出，图像1现在显示，并且看起来一直坐在它后面。

任何人对这个问题有什么建议或想法？我一直在网上查看资源，并且没有看到任何类似的内容。

注意：这仅适用于从图像2到图像1的转换，而不是图像1到图像2的转换。

-edit，这是我的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>

以及我的新秀＆＃39; showThis＆＃39;功能。该页面按照我的意愿工作，但只有双击每个按钮。



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

希望这有助于某人。

Answer 2

如果没有看到您的代码，很难确切地看到您的问题是什么，但根据您的描述，听起来您实际上需要将两个图像都设置为隐藏以允许转换完成然后设置超时中的下一个图像。这是一个使用角动作制作动画的工作插件。

http://plnkr.co/edit/oDARTE67Iqkdm81mT1RG

至于您的按钮没有显示预期的图片，我需要查看您的代码以提供解决方案。

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

2 个答案: