.transition-2{
    position: fixed;
    left: -100%;
    top: 0;
    width: 100%;
    bottom: 0;
    z-index: 10000000;
    background-color: #81a1c1;
    transition: 0.5s ease-out;
}

.transition-2.is-active{
    left: 0;
}

.transition-3{
    position: fixed;
    left: 0;
    top: 100%;
    height: 100%;
    right: 0;
    z-index: 1000000;
    background-color: #81a1c1;
    transition: 0.5s ease-out;
}

.transition-3.is-active{
    top: 0;
}