ng-show/hide圖像動畫延遲

所以我的網頁有2個按鈕，它們使用ng-click來呈現每個圖像的特定圖像。ng-show/hide圖像動畫延遲

當頁面加載時顯示圖像1，並且將圖像引入到視圖中的動畫正常工作。

切換到圖像2（通過按鈕2）工作正常。動畫會將圖像2拉入視圖

但是，在單擊按鈕1時，顯示圖像1時出現問題。在單擊按鈕1時最初拉到頁面上的圖像是圖像2，當將圖像隱藏應用到圖像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>

以及我的新'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); 
    }

來源

2014-06-25 hoodsy

你能分享一些代碼嗎？或者讓一個jsFiddle？ –

我在上面編輯過來顯示我的一些代碼。我認爲，如果我可以將當前的圖片移動到後面，那麼下一張要展示的圖片就放在其上，我不會有任何問題。有關如何做到這一點的任何建議？ – hoodsy

您是否找到任何解決方案，因爲我面臨同樣的問題。如果我使動畫更快，屏幕塗料更快，但沒有真正的解決方案。 :-( –

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

所以基本上有兩個不同的跨度和顯示它們互相排斥，我把ng-class放在單個SPAN上即使在動畫製作時也能解決這個問題。我相信，由於動畫仍然會造成延遲，但嘿，至少我沒有看到兩個圖像，一次只能顯示一個圖標。

希望這可以幫助別人。

來源

2014-12-03 00:44:29

沒有看到你的代碼很難看你到底是什麼問題，但根據您的描述，這聽起來像你真的需要兩個圖像設置爲隱藏，以允許過渡完成，然後在超時設置下一個圖像。這是一個使用角運動的動畫工作的運動員。

http://plnkr.co/edit/oDARTE67Iqkdm81mT1RG

至於你的按鈕不顯示預期的圖像，我需要看到你的代碼提供瞭解決方案。

來源

2014-06-25 22:13:21

該按鈕實際上顯示的是正確的圖像，它只是最初由舊圖像覆蓋，我會盡快解決您的問題，謝謝您的建議;我在上面添加了html。 – hoodsy

ng-show/hide圖像動畫延遲

回答

相關問題