实现侧滑栏

实现水平侧滑，需求需要写一个弹出框水平滑动显示和隐藏，本来用jquery的show()和hide()可惜没有动画效果，后来采用了tranform和transition实现，注意这里不要采用display:none，因为动画会和此属性冲突。

@media (max-width: 767px){
   /*查询条件变为滑动*/
    .responsiveTableForm{
        float:right;
        position: absolute;
        left:0px;
        right: 0px;
        width:100%;
        padding:20px 0;
        z-index: 5000;
        background-color: #FFFFFF;
        transform:translate(767px,0);
        transition:transform .3s ease-out;
    }
    .responsiveTableForm.active{
       transform:translate(0,0);
    }
}

/*遮罩层*/
.modal-cover{
    display: none;
    position: absolute;
    z-index: 3000;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    -moz-opacity: 0.5;
    opacity:.50;
    filter: alpha(opacity=50);
}

转载于:https://my.oschina.net/u/2256193/blog/800091