css slide in slide out animation

css selectors and keyframes

.slip_in_animation{
    animation: slip_in 1s;
}

.slip_out_animation{
    animation: slip_out 1s;
}

/*右侧滑入*/
@keyframes slip_in
{
    from {transform:translateX(100%);}
    to {transform:translateX(0);}

}

/*左侧滑出*/
@keyframes slip_out
{
    from {transform:translateX(0);}
    to {transform:translateX(-100%);}
}

Apply animations to page elements

    //页面滑入，要显示的页面
    this.slipIn = function(pageNo){
        $("#supplierListPage_"+pageNo).addClass("slip_in_animation");
    };

    //页面滑出，
    this.slipOut = function(pageNo){
        $("#supplierListPage_"+pageNo).addClass("slip_out_animation");

        //移除上一页,定时比动画稍短，避免闪烁
        setTimeout(function(){
            $("#supplierListPage_"+pageNo).remove();
        },900);
    };