Chrome：CSS＆JS轉換不能正常工作

Question

我有三個圖像img1，img2和img3（3圖像）。它的初始位置是-50％絕對右上角和左側。當我將位置更改爲static，並且轉換爲2s時，它實際上需要移到中心。

問題雖然transiton正在發生，但是在某些鍍鉻物（在某些筆記本電腦的鍍鉻物中）中會卡住。我知道是什麼讓這個轉折破裂。

這是我的jQuery代碼。

 $(".middle-fixed-coming-soon-top").css({"top": "0px"}); 
     $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-coming-soon-top").css({"position": "static"}); 
      // code to execute after transition ends 
     }); 

     $(".middle-fixed-organics-left").css({"left": "333px"}); 
     $(".middle-fixed-organics-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-organics-left").css({"position": "static"}); 
      $(".middle-fixed-organics-left .for-margin").css("margin-top", "auto"); 
      // code to execute after transition ends 
     }); 

     $(".middle-fixed-tagline-right").css({"right": "333px"}); 
     $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-tagline-right").css({"position": "static"}); 
      $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto"); 
      // code to execute after transition ends 
     }); 

我是jQuery的新手。誰能幫忙？提前致謝。

EDITS
發生這種情況時，我第二次或更多的重新加載。

Answer 1

我注意到的最重要的事情是，您將一個元素從位置：絕對位置切換到靜態位置。這意味着它從不影響周圍內容轉變爲推動其他任何事情。我會使用相對而非絕對的，並完全取出靜態開關。從那裏，你應該只需要重新確定左/頂部定位。下面的代碼應該處理所有的JS結束，只是CSS需求的位置：絕對切換到位置：相對。

 $(".middle-fixed-coming-soon-top").css({"top": "0px"}); 
     $(".middle-fixed-coming-soon-top").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      // code to execute after transition ends 
     }); 

     $(".middle-fixed-left").css({"left": "0px"}); 
     $(".middle-fixed-left").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-left .for-margin").css("margin-top", "auto"); 
      // code to execute after transition ends 
     }); 

     $(".middle-fixed-tagline-right").css({"right": "0px"}); 
     $(".middle-fixed-tagline-right").one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(e) { 
      $(".middle-fixed-tagline-right .for-margin").css("margin-top", "auto"); 
      // code to execute after transition ends 
     });