我实现了一个切换 View 页面,您可以在列表和网格之间切换切换状态之间的动画有点难看(使用顶部的两个链接切换以了解我的意思):http://jsfiddle.net/qvLoLhy7/2/
为了解决这个问题,我尝试在切换按钮上应用 setTimeout
函数,这样我就可以先淡出父 div #post-list
,然后执行布局更改,然后最后再次淡出 #post-list
以显示更新后的布局。当我实现它时,虽然淡入/淡出有效但布局没有改变:http://jsfiddle.net/qvLoLhy7/
任何人都可以帮助找出为什么会发生这种情况吗?
这是 JS 的一个片段:
function init() {
optionSwitch.forEach( function( el, i ) {
el.addEventListener( 'click', function( ev ) {
$('#post-list').addClass('go'); // Fade out
setTimeout(function() {
_switch( this ); //Update layout. Switch refers to another function
}, 500);
setTimeout(function() {
$('#post-list').removeClass('go'); // Fade new layout back in
}, 1000);
}, false );
} );
}
最佳答案
你正在使用 jquery 但你并没有真正使用 jquery。 Jquery 带有淡入和淡出动画,您可以使用。
var $pl = $('#post-list');
$pl.fadeOut('slow', function(){
//call back when animation is done
//here you can apply layout changes
$pl.fadeIn('slow', function(){
//call back when the fade in animation is done
//do other stuff here
});
});
Here是一个基本的例子。
您还应该将您的代码转换为等效的 jquery。
如果这就是您要找的,请告诉我。
关于javascript - 单击淡出 div 然后淡入,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29082184/