css - 滚动时动画丢失

Question

原始模板链接:

http://ironsummitmedia.github.io/startbootstrap-grayscale/

点击“向下”箭头后，页面逐渐向下移动到下一部分。

我已经克隆了它并添加了一些我自己的部分，但是这导致单击向下箭头时失去平滑过渡效果。

请点击此处:

http://plnkr.co/edit/0MV3QzRpJcPWlpuNMDav

.btn-circle i.animated {
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
}

.btn-circle:hover i.animated {
    -webkit-animation-name: pulse;
    -moz-animation-name: pulse;
    -webkit-animation-duration: 1.5s;
    -moz-animation-duration: 1.5s;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
}

Answer 1

滚动代码使用easeInOutExpo 所以你需要缓动插件来达到效果。如果您不想为此效果添加插件，也可以从代码中删除 easeInOutExpo。

$('a.page-scroll').bind('click', function(event) {
     var $anchor = $(this);
     $('html, body').stop().animate({
         scrollTop: $($anchor.attr('href')).offset().top
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault();
});