今天在制作首页导航图特效demo时,无意发现一个奇怪的交互现象,故记录
经测试,简化了触发该现象的代码,如下:
在点击a标签后,moveBox并未如预期所想从距顶部350px位置到距顶部0px位置,而是a标签从屏幕上方进入屏幕。
去除html的overflow属性后,可发现当点击a标签时,页面出现一个滚动条,同时滚动条的可滚动长度在不断的缩小,同时a标签从上方进入可视区域。
把animation的循环次数从1改成大于1时,从第二次动画开始,动画效果符合预期。
修改moveBox的position属性的值为fixed可不触发该现象。