CSSアニメーションがクラスを削除するときにアニメーション化しない

Question

私はそれを過ぎてスクロールしてそこに行くとアニメーション化するときに右下に移動するイメージを持っています。この部分は動作します。

私がスクロールアップすると、元の場所に戻って同じようにアニメーション化したいと思います。ここで私は助けが必要です。

トランジションなしで元の位置にジャンプするだけです。これを正しく動作させるにはどうすればよいですか？

var $window \t \t = $(window); 
 
var $container \t \t = $('.container'); 
 
var containerTop \t = $container.offset().top; 
 

 
$window.scroll(function() { 
 
\t if($window.scrollTop() > containerTop) { 
 
\t \t pullContainer(); 
 
\t } else { 
 
\t \t revertContainer(); 
 
\t } 
 
}); 
 

 
function pullContainer () { 
 
\t $('.container').addClass('move'); 
 
\t console.log('pullContainer'); 
 
} 
 

 
function revertContainer () { 
 
\t $('.container').removeClass('move'); 
 
\t console.log('revertContainer'); 
 
}

#header, #content, #footer { 
 
\t height: 75vh; 
 
} 
 

 
#header { 
 
\t background: #ccc; 
 
} 
 

 
#content { 
 
\t background: #666; 
 
} 
 

 
#footer { 
 
\t background: #999; 
 
} 
 

 
.container { 
 
\t position: static; 
 
\t left: 0; 
 
\t top: 0; 
 
\t transition: all 1s ease; 
 
} 
 

 
.move{ 
 
\t position: fixed; 
 
\t left: calc(100vw - 400px); 
 
\t top: calc(100vh - 400px); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="header"></div> 
 
\t <div id="content"> 
 
\t \t <div class="container"> 
 
\t \t \t <img src="http://lorempixel.com/400/400" /> 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="footer"></div>

Answer 1

あなたが「移動」クラスを削除すると遷移が影響しないように、位置が静的に固定から直接行きます。 位置を固定している別のクラスが必要な場合があります。上に行くときに追加し、下にスクロールするときに削除します（そのようなもの）。また、移行を持っている.containerは、それが固定されなければならない、あなたのケースで静的以外のポジションを持っている必要があり

それだけで戻っ0 0にスナップので、あなたがstatic` `へfixed``から切り替えているので、私は推測すると思います