/**
 * @Author: yanxinaliang (rainyxlxl@163.com)
 * @Date: 2019/3/30 15:23
 * @Last Modified by: yanxinaliang (rainyxlxl@163.com)
 * @Last Modified time: 2019/3/30 15:23
 */

.board-frame{
    z-index: 1;
    opacity: 0;
    overflow: hidden;
    position: relative;
  /*  transition: width 300ms cubic-bezier(.645, .045, .355, 1),
                height 300ms cubic-bezier(.645, .045, .355, 1),
                opacity 300ms cubic-bezier(.645, .045, .355, 1);*/
    transition: opacity 300ms cubic-bezier(.645, .045, .355, 1);
    &-active{
        z-index: 2!important;
        opacity: 1!important;
    }
}

@keyframes  boardFrameHideFromRight{
    from{
        opacity: 1;
        transform: translate3d(0%,0,0);
    }
    to{
        opacity: 0.2;
        transform: translate3d(-100%,0,0);
    }
}

@keyframes boardFrameShowFromRight {
    from{
        opacity: 0.2;
        transform: translate3d(100%,0,0);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

@keyframes  boardFrameHideFromLeft{
    from{
        opacity: 1;
        transform: translate3d(0%,0,0);
    }
    to{
        opacity: 0.2;
        transform: translate3d(100%,0,0);
    }
}

@keyframes boardFrameShowLeft {
    from{
        opacity: 0.2;
        transform: translate3d(-100%,0,0);
    }
    to{
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}