- 逻辑
另外写个新的类名，
在点击切换时先把类名加上，
然后在使用定时器删除类名
//css
.y_serve .y_animate{animation: animate_serve 0.3s;}
@keyframes animate_serve {
0%{
transform: translateX(-10px);
opacity: 0;
}
100%{
transform: translateX(0);
opacity: 1;
}
}
.y_serve .y_animate_big{animation: animate_serve_big 0.3s;}
@keyframes animate_serve_big {
0%{
transform:scale(1.02);
}
100%{
transform:scale(1);
}
}
$('.y_arrow_pre').on('click',function(){
if(currIndex<=0) return false;
// 符合条件了先添加类名
$('.y_serve .y_infobox').addClass('y_animate');//就是给这两个标签添加动画
$('.y_serve .y_contbg').addClass('y_animate_big');//就是给这两个标签添加动画
currIndex--;
$('.y_serve .y_title1').html(data[currIndex].title1);
// 使用定时器一段时间后删除类名
setTimeout(function(){
$('.y_serve .y_infobox').removeClass('y_animate');
$('.y_serve .y_contbg').removeClass('y_animate_big');
},200)
})
$('.y_arrow_next').on('click',function(){
// indx--
if(currIndex>=2) return false;
$('.y_serve .y_infobox').addClass('y_animate');
$('.y_serve .y_contbg').addClass('y_animate_big');
currIndex++;
$('.y_serve .y_title1').html(data[currIndex].title1);
setTimeout(function(){
$('.y_serve .y_infobox').removeClass('y_animate');
$('.y_serve .y_contbg').removeClass('y_animate_big');
},200)
})
})
