Question

我正在杀死我的神经元，试图弄清楚如何使用css过渡或动画制作这个网站的导航栏：http://tabu.realitatea.net/。

有人知道怎么做吗？甚至给我一个起点？

Answer 1

制作非常有趣，请查看。 https://jsfiddle.net/6brsm2zt/

JS

var slider = $('#slider');

$('div').on('mouseenter','a',function(){
  var box = $(this);
  var p = box.position();
  slider.animate({
    width: box.outerWidth(),
    left: p.left,
  },250);
})

$('div').on('mouseleave','a',function(){
  slider.stop();
})

$('div').on('mouseleave',function(){
  $('#slider').animate({
    width: 0,
    left: 0,
  },200);
})

基本思路是在左边有一个零宽度div，让我们把它称为滑块。将鼠标悬停在某个项目上时，可以将滑块的宽度和左侧位置设置为等于项目的宽度和左侧位置。动画的持续时间很短，大约三分之一秒，给人一种反应的感觉。

当您完全将鼠标移开时，只需将滑块的宽度和左侧位置设置为0，持续时间较短，例如200 ms，它将缩小到侧面。

一个棘手的部分是当你来回挥动鼠标时。最初，div会为每个项目进行转换，让我等待滑块终于来到我的鼠标。我通过在鼠标移开项目时取消动画来解决这个问题。由于项目之间鼠标的事件顺序是mouseenter - ＆gt; mouseleave - ＆gt; mouseenter，我已经准备好了进入mouseenter的过渡。现在滑块将无情地追逐你的鼠标：D。

有谁知道如何做这个css过渡？

1 个答案: