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

  • 逻辑
    另外写个新的类名,
    在点击切换时先把类名加上,
    然后在使用定时器删除类名
//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)
    })
})
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容