切换过渡动画-字体位移透明度、图片先放大

• 逻辑
  另外写个新的类名，
  在点击切换时先把类名加上，
  然后在使用定时器删除类名

//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)
    })
})