为什么会有动画效果，哪里代码产生的的效果？
来源：5-5 JS实现滑动门效果
迷失的小麦
2019-12-18 17:15:07
var navTip = getElem('.header__nav-tip');
var setTip = function(idx,lib){
lib[idx].onmouseover =function(){
console.log(this,idx);
navTip.style.left = ( idx * 70 )+'px';
}
var currentIdx = 0;
lib[idx].onmouseout = function(){
console.log(currentIdx);
for(var i=0;i<lib.length;i++){
if( getCls( lib[i] ).indexOf('header__nav-item_status_active') > -1 ){
currentIdx = i;
break;
}
}
navTip.style.left = ( currentIdx * 70 )+'px';
}
}
for(var i=0;i<navItems.length;i++){
setTip(i,navItems);
}
1回答
-
同学你好，动画效果是说的红色下划线的滑动效果吗？问题中的js只是改变了下划线的位置，即left值。而滑动的效果是结合了过渡动画，即如下属性：
同学可以下载源码看一下，当去掉过渡属性（transition）之后，下划线改变left时，就没有滑动效果，鼠标移入哪一个导航，下划线直接跑到对应的导航下面，比较生硬。当设置了过渡效果，会看到，left值的一个变化过程，也就产生了滑动效果。如果不理解过渡动画，建议复习一下前面的课程。地址如下：
https://class.imooc.com/course/765
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题