Javascript ng使用图像动画延迟显示/隐藏

因此，我的页面有两个按钮，它们使用ng click来呈现特定于每个按钮的图像

页面加载时会显示图像1，将图像带入视图的动画效果良好

切换到图像2（通过按钮2）效果良好。动画将图像2拉入视图

但单击按钮1以显示图像1时，出现了一个问题。单击按钮1时最初拉到页面上的图像是图像2，当ng hide应用于图像2时，图像2会淡出，现在显示图像1，并且图像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>

---

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

---

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

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

固定代码

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

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

---

希望这对其他人有所帮助。

你能分享一些代码吗？或者制作一个JSFIDLE？我在上面编辑了一些代码。我想如果我能把当前的图片移到后面，那么下一张要显示的图片就放在上面，我就不会有问题了。有什么建议吗？你有没有找到解决这个问题的办法，因为我面临着同样的问题。如果我使动画速度更快，屏幕绘制速度更快，但没有真正的解决方案：-（按钮实际上显示的是正确的图像，它只是最初由旧图像覆盖。我会尽快尝试您的解决方案，谢谢您的建议；我在上面添加了我的html。虽然这可能从理论上回答了问题，但在这里包括答案的基本部分，并提供链接以供参考。请发布并更新答案是。