javascript - blast.js 改变 li 元素的位置

Question

我有一个 h1 和一个带有 ul 和 li 的 nav。当鼠标移到 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

您的动画库似乎将您的 li display:inline 更改为 display: list-item 就像默认情况下一样。尝试添加以下代码:

li {
    display: inline !important;
}

即使库更改了元素内联样式，它也应该使您的列表项保持内联。