クローム：CSS＆JSの移行が正常に

Question

を働いていない、私は三つの画像img1、img2とimg3（3画像）を持っています。初期位置はそれぞれ右上と左上の絶対値が-50％です。位置をstaticに変更すると、トランジション2sが実際には中央に移動する必要があります。

問題トランジトンが行われている間に、クロム（一部のノートパソコンのクロム）がスナップしています。私はトランジションを壊していることを知っています。

これは私の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
これは、2回以上リロードしたときに発生します。

Answer 1

私は気づい最大のものは、あなたがた位置から要素を切り替えていることである：位置に絶対：静的。これは、周囲のコンテンツに影響を与えないことから、他のすべてのものを排除することに変わることを意味します。私は絶対的なものではなく相対的なものを使用し、静的なスイッチを完全に取り出します。そこから、左/上の位置を変更し直す必要があります。以下のコードはJSのすべての端を処理する必要があります。ちょうどCSSはpositionを必要としています：absolute：position：relativeに切り替えます。

 $(".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 
     });