jquery - 删除类时 CSS 动画不动画

Question

我有一张图片，我希望它在我滚动经过它时转到右下角，并在它转到那里时设置动画。这部分有效。

当我向上滚动时，我希望它以同样的方式回到原来的位置。这是我需要帮助的地方。

它只是跳回原来的位置而没有过渡。我怎样才能让它正常工作？

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

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

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

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

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

#header {
	background: #ccc;
}

#content {
	background: #666;
}

#footer {
	background: #999;
}

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

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

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

Answer 1

当您删除“移动”类时，位置直接从固定变为静态，因此不会影响转换。 您可能需要另一个具有静态位置的类，您可以在顶部添加它并在向下滚动时将其删除(类似的东西)。此外，具有过渡的 .container 应该有一个位置，而不是 static 在你的情况下它应该是固定的