blast.js要素の位置の変更

Question

h1とnavの間には、ulとliがあります。マウスがh1を超え、h1がアニメートし、liがフェードインします。ただし、リストはアニメーション後のものではありません。もともと、リストはdisplay:inlineというヘッダーの中央に表示されていますが、アニメーションの後にリストは左上隅に止まり、結果はdisplay:blockに似ています。なぜこれが起こりますか？

JSbin

$('h1').one('mouseover', function() { 

$('h1').blast({ 
    delimiter: 'word', 
    generateValueClass: true 
}); 

    $('.blast-word-surviving') 
    .css({ 
    position: 'relative', 
    left: 0 
    }) 
    .animate({left: '-100vw' }, 1600); 
    setTimeout(function() { 
     $('.blast-word-surviving').css('visibility', 'hidden'); 
     $('nav').css('visibility', 'visible'); 
     $('li').velocity("fadeIn", { duration: 1500 }); 
    }, 2000); 

$('.blast-word-earth') 
.css({ 
    position: 'relative', 
    left: 0 
}) 
.animate({left: '100vw' }, 1600); 
setTimeout(function() { 
    $('.blast-word-earth').css('visibility', 'hidden'); 
    $('nav').css('visibility', 'visible'); 
    $('li').velocity("fadeIn", { duration: 1500 }); 
}, 2000); 


}); 

Answer 1

それがデフォルトであるべきようなあなたのアニメーションライブラリがdisplay: list-itemにごlidisplay:inlineを変更するように思えます。次のコードを追加してみてください：

li { 
    display: inline !important; 
} 

ライブラリが要素のインラインスタイルを変更してもリスト項目をインラインに保つ必要があります。