bk-magic-vue/lib/ui/transition.css

基于蓝鲸 Magicbox 和 Vue 的前端组件库

.transition-effect{
    -webkit-transition:all linear .2s;
    transition:all linear .2s;
}
.bk-fade-in-linear-enter-active,
.bk-fade-in-linear-leave-active{
    -webkit-transition:opacity linear .2s;
    transition:opacity linear .2s;
}
.bk-fade-in-linear-enter,
.bk-fade-in-linear-leave-active{
    opacity:0;
}
.bk-fade-in-ease-enter-active,
.bk-fade-in-ease-leave-active{
    -webkit-transition:opacity cubic-bezier(.55,0,.1,1) .2s;
    transition:opacity cubic-bezier(.55,0,.1,1) .2s;
}
.bk-fade-in-ease-enter,
.bk-fade-in-ease-leave-active{
    opacity:0;
}
.bk-slide-fade-right-enter-active,
.bk-slide-fade-right-leave-active{
    -webkit-transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:transform linear .2s, opacity linear .2s;
    transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s;
}
.bk-slide-fade-right-enter{
    opacity:0;
    -webkit-transform:translate3d(20%, 0, 0);
            transform:translate3d(20%, 0, 0);
}
.bk-slide-fade-right-leave-active{
    opacity:0;
    -webkit-transform:translate3d(-20%, 0, 0);
            transform:translate3d(-20%, 0, 0);
}
.bk-slide-fade-left-enter-active,
.bk-slide-fade-left-leave-active{
    -webkit-transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:transform linear .2s, opacity linear .2s;
    transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s;
}
.bk-slide-fade-left-enter{
    opacity:0;
    -webkit-transform:translate3d(-20%, 0, 0%);
            transform:translate3d(-20%, 0, 0%);
}
.bk-slide-fade-left-leave-active{
    opacity:0;
    -webkit-transform:translate3d(20%, 0, 0);
            transform:translate3d(20%, 0, 0);
}
.bk-slide-fade-up-enter-active,
.bk-slide-fade-up-leave-active{
    -webkit-transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:transform linear .2s, opacity linear .2s;
    transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s;
}
.bk-slide-fade-up-enter{
    opacity:0;
    -webkit-transform:translate3d(0, +20%, 0);
            transform:translate3d(0, +20%, 0);
}
.bk-slide-fade-up-leave-active{
    opacity:0;
    -webkit-transform:translate3d(0, -20%, 0);
            transform:translate3d(0, -20%, 0);
}
.bk-slide-fade-down-enter-active,
.bk-slide-fade-down-leave-active{
    -webkit-transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:transform linear .2s, opacity linear .2s;
    transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s;
}
.bk-slide-fade-down-enter{
    opacity:0;
    -webkit-transform:translate3d(0, -20%, 0);
            transform:translate3d(0, -20%, 0);
}
.bk-slide-fade-down-leave-active{
    opacity:0;
    -webkit-transform:translate3d(0, 20%, 0);
            transform:translate3d(0, 20%, 0);
}
.bk-zoom-enter,
.bk-zoom-leave-to{
    -webkit-transform:scale(0);
            transform:scale(0);
}
.bk-zoom-leave,
.bk-zoom-enter-to{
    -webkit-transform:scale(1);
            transform:scale(1);
}
.bk-zoom-enter-active,
.bk-zoom-leave-active{
    -webkit-transition:all .2s;
    transition:all .2s;
}
.bk-move-in-left-enter,
.bk-move-in-left-leave-to{
    -webkit-transform:translate3d(-100%, 0, 0);
            transform:translate3d(-100%, 0, 0);
    opacity:0;
}
.bk-move-in-left-leave,
.bk-move-in-left-enter-to{
    -webkit-transform:translate3d(0, 0, 0);
            transform:translate3d(0, 0, 0);
}
.bk-move-in-left-enter-active,
.bk-move-in-left-leave-active{
    -webkit-transition:all .2s;
    transition:all .2s;
}
.bk-move-in-right-enter,
.bk-move-in-right-leave-to{
    -webkit-transform:translate3d(100%, 0, 0);
            transform:translate3d(100%, 0, 0);
    opacity:0;
}
.bk-move-in-right-leave,
.bk-move-in-right-enter-to{
    -webkit-transform:translate3d(0, 0, 0);
            transform:translate3d(0, 0, 0);
}
.bk-move-in-right-enter-active,
.bk-move-in-right-leave-active{
    -webkit-transition:all .2s;
    transition:all .2s;
}
.bk-move-in-up-enter,
.bk-move-in-up-leave-to{
    -webkit-transform:translate3d(0, -100%, 0);
            transform:translate3d(0, -100%, 0);
    opacity:0;
}
.bk-move-in-up-leave,
.bk-move-in-up-enter-to{
    -webkit-transform:translate3d(0, 0, 0);
            transform:translate3d(0, 0, 0);
}
.bk-move-in-up-enter-active,
.bk-move-in-up-leave-active{
    -webkit-transition:all .2s;
    transition:all .2s;
}
.bk-move-in-down-enter,
.bk-move-in-down-leave-to{
    -webkit-transform:translate3d(0, 100%, 0);
            transform:translate3d(0, 100%, 0);
    opacity:0;
}
.bk-move-in-down-leave,
.bk-move-in-down-enter-to{
    -webkit-transform:translate3d(0, 0, 0);
            transform:translate3d(0, 0, 0);
}
.bk-move-in-down-enter-active,
.bk-move-in-down-leave-active{
    -webkit-transition:all .2s;
    transition:all .2s;
}
.fade-enter-active,
.fade-leave-active{
    -webkit-transition:opacity linear .2s;
    transition:opacity linear .2s;
}
.fade-enter,
.fade-leave-active{
    opacity:0;
}
.fade-show-enter-active,
.fade-show-leave-active{
    -webkit-transition:opacity linear .2s, margin linear .2s;
    transition:opacity linear .2s, margin linear .2s;
}
.fade-show-enter,
.fade-show-leave-active{
    opacity:0;
    margin-top:-20px;
}
.displacement-fade-show-enter-active,
.displacement-fade-show-leave-active{
    -webkit-transition:opacity linear .2s, margin linear .2s;
    transition:opacity linear .2s, margin linear .2s;
}
.displacement-fade-show-enter,
.displacement-fade-show-leave-active{
    opacity:0;
    margin-top:-50px;
}
.fade-center-enter-active,
.fade-center-leave-active{
    -webkit-transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:opacity linear .2s, transform linear .2s;
    transition:opacity linear .2s, transform linear .2s, -webkit-transform linear .2s;
    -webkit-transform-origin:center center;
            transform-origin:center center;
}
.fade-center-enter,
.fade-center-leave-active{
    opacity:0;
    -webkit-transform:translate(50%, -50%) scale(0, 0) !important;
            transform:translate(50%, -50%) scale(0, 0) !important;
}
.slide-enter-active .bk-sideslider-wrapper, .slide-leave-active .bk-sideslider-wrapper{
        -webkit-transform:translateX(0);
                transform:translateX(0);
        -webkit-transition:-webkit-transform .25s;
        transition:-webkit-transform .25s;
        transition:transform .25s;
        transition:transform .25s, -webkit-transform .25s;
    }
.slide-enter-active{
    -webkit-animation:slider-fade-in .25s;
            animation:slider-fade-in .25s;
}
.slide-leave-active{
    animation:slider-fade-in .25s reverse;
}
.slide-enter .bk-sideslider-wrapper.left, .slide-leave-to .bk-sideslider-wrapper.left{
            -webkit-transform:translateX(-100%);
                    transform:translateX(-100%);
            -webkit-transition:-webkit-transform .25s;
            transition:-webkit-transform .25s;
            transition:transform .25s;
            transition:transform .25s, -webkit-transform .25s;
        }
.slide-enter .bk-sideslider-wrapper.right, .slide-leave-to .bk-sideslider-wrapper.right{
            -webkit-transform:translateX(100%);
                    transform:translateX(100%);
            -webkit-transition:-webkit-transform .25s;
            transition:-webkit-transform .25s;
            transition:transform .25s;
            transition:transform .25s, -webkit-transform .25s;
        }
@-webkit-keyframes slider-fade-in{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes slider-fade-in{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
.slide-fade-enter-active,
.fade-leave-active{
    -webkit-transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:opacity linear .2s, -webkit-transform linear .2s;
    transition:transform linear .2s, opacity linear .2s;
    transition:transform linear .2s, opacity linear .2s, -webkit-transform linear .2s;
}
.slide-fade-enter{
    opacity:0;
    -webkit-transform:translateX(20%);
            transform:translateX(20%);
}
.slide-fade-leave-active{
    opacity:0;
    -webkit-transform:translateX(-20%);
            transform:translateX(-20%);
}
.toggle-slide-enter-active,
.toggle-slide-leave-active{
    -webkit-transition:opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1);
    transition:opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1);
    transition:transform .3s cubic-bezier(.23, 1, .23, 1), opacity .5s cubic-bezier(.23, 1, .23, 1);
    transition:transform .3s cubic-bezier(.23, 1, .23, 1), opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1);
    -webkit-transform-origin:center top;
            transform-origin:center top;
}
.toggle-slide-enter,
.toggle-slide-leave-active{
    -webkit-transform:translateZ(0) scaleY(0);
            transform:translateZ(0) scaleY(0);
    opacity:0;
}
.toggle-slide2-enter-active,
.toggle-slide2-leave-active{
    -webkit-transition:opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1);
    transition:opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1);
    transition:transform .3s cubic-bezier(.23, 1, .23, 1), opacity .5s cubic-bezier(.23, 1, .23, 1);
    transition:transform .3s cubic-bezier(.23, 1, .23, 1), opacity .5s cubic-bezier(.23, 1, .23, 1), -webkit-transform .3s cubic-bezier(.23, 1, .23, 1);
    -webkit-transform-origin:center bottom;
            transform-origin:center bottom;
}
.toggle-slide2-enter,
.toggle-slide2-leave-active{
    -webkit-transform:translateZ(0) scaleY(0);
            transform:translateZ(0) scaleY(0);
    opacity:0;
}
.fade-enter-active,
.fade-appear{
    -webkit-animation-duration:.3s;
            animation-duration:.3s;
    -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
}
.fade-leave-active{
    -webkit-animation-duration:.3s;
            animation-duration:.3s;
    -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
}
.fade-enter-active,
.fade-appear{
    -webkit-animation-name:fadeIn;
            animation-name:fadeIn;
    -webkit-animation-play-state:running;
            animation-play-state:running;
}
.fade-leave-active{
    -webkit-animation-name:fadeOut;
            animation-name:fadeOut;
    -webkit-animation-play-state:running;
            animation-play-state:running;
}
.fade-enter-active,
.fade-appear{
    opacity:0;
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
}
.fade-leave-active{
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
}
@-webkit-keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@keyframes fadeIn{
    0%{
        opacity:0;
    }
    100%{
        opacity:1;
    }
}
@-webkit-keyframes fadeOut{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}
@keyframes fadeOut{
    0%{
        opacity:1;
    }
    100%{
        opacity:0;
    }
}
.ease-enter-active,
.ease-appear{
    -webkit-animation-duration:.3s;
            animation-duration:.3s;
    -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
}
.ease-leave-active{
    -webkit-animation-duration:.3s;
            animation-duration:.3s;
    -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
}
.ease-enter-active,
.ease-appear{
    -webkit-animation-name:easeIn;
            animation-name:easeIn;
    -webkit-animation-play-state:running;
            animation-play-state:running;
}
.ease-leave-active{
    -webkit-animation-name:easeOut;
            animation-name:easeOut;
    -webkit-animation-play-state:running;
            animation-play-state:running;
}
.ease-enter-active,
.ease-appear{
    opacity:0;
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
    -webkit-animation-duration:.2s;
            animation-duration:.2s;
}
.ease-leave-active{
    -webkit-animation-timing-function:linear;
            animation-timing-function:linear;
    -webkit-animation-duration:.2s;
            animation-duration:.2s;
}
@-webkit-keyframes easeIn{
    0%{
        opacity:0;
        -webkit-transform:scale(0.9);
                transform:scale(0.9);
    }
    100%{
        opacity:1;
        -webkit-transform:scale(1);
                transform:scale(1);
    }
}
@keyframes easeIn{
    0%{
        opacity:0;
        -webkit-transform:scale(0.9);
                transform:scale(0.9);
    }
    100%{
        opacity:1;
        -webkit-transform:scale(1);
                transform:scale(1);
    }
}
@-webkit-keyframes easeOut{
    0%{
        opacity:1;
        -webkit-transform:scale(1);
                transform:scale(1);
    }
    100%{
        opacity:0;
        -webkit-transform:scale(0.9);
                transform:scale(0.9);
    }
}
@keyframes easeOut{
    0%{
        opacity:1;
        -webkit-transform:scale(1);
                transform:scale(1);
    }
    100%{
        opacity:0;
        -webkit-transform:scale(0.9);
                transform:scale(0.9);
    }
}
.transition-drop-enter-active,
.transition-drop-appear{
    -webkit-animation-duration:.3s;
            animation-duration:.3s;
    -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
}
.transition-drop-leave-active{
    -webkit-animation-duration:.3s;
            animation-duration:.3s;
    -webkit-animation-fill-mode:both;
            animation-fill-mode:both;
    -webkit-animation-play-state:paused;
            animation-play-state:paused;
}
.transition-drop-enter-active,
.transition-drop-appear{
    -webkit-animation-name:transitionDropIn;
            animation-name:transitionDropIn;
    -webkit-animation-play-state:running;
            animation-play-state:running;
}
.transition-drop-leave-active{
    -webkit-animation-name:transitionDropOut;
            animation-name:transitionDropOut;
    -webkit-animation-play-state:running;
            animation-play-state:running;
}
.transition-drop-enter-active,
.transition-drop-appear{
    opacity:0;
    -webkit-animation-timing-function:ease-in-out;
            animation-timing-function:ease-in-out;
}
.transition-drop-leave-active{
    -webkit-animation-timing-function:ease-in-out;
            animation-timing-function:ease-in-out;
}
@-webkit-keyframes transitionDropIn{
    0%{
        opacity:0;
        -webkit-transform:scaleY(0.8);
                transform:scaleY(0.8);
    }
    100%{
        opacity:1;
        -webkit-transform:scaleY(1);
                transform:scaleY(1);
    }
}
@keyframes transitionDropIn{
    0%{
        opacity:0;
        -webkit-transform:scaleY(0.8);
                transform:scaleY(0.8);
    }
    100%{
        opacity:1;
        -webkit-transform:scaleY(1);
                transform:scaleY(1);
    }
}
@-webkit-keyframes transitionDropOut{
    0%{
        opacity:1;
        -webkit-transform:scaleY(1);
                transform:scaleY(1);
    }
    100%{
        opacity:0;
        -webkit-transform:scaleY(0.8);
                transform:scaleY(0.8);
    }
}
@keyframes transitionDropOut{
    0%{
        opacity:1;
        -webkit-transform:scaleY(1);
                transform:scaleY(1);
    }
    100%{
        opacity:0;
        -webkit-transform:scaleY(0.8);
                transform:scaleY(0.8);
    }
}