Question

我有一张图片，当我滚动过去时，我希望它向右下方移动，并在它去那里时制作动画。这部分有效。

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

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

＆＃13;

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' );
}

＆＃13;

#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 );
}

＆＃13;

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

＆＃13;

Answer 1

当您移除'move'类时，position会直接从fixed移动到static，因此转换不会生效。您可能需要另一个具有静态位置的类，当您向上移动时添加它并在向下滚动时将其删除（类似的东西）。另外。具有转换的.container在你的情况下应该有一个非静态的位置它应该是固定的

删除类时CSS动画不动画

1 个答案: