@import "./common/common";
@import "./common/util";

.lazyload-image {
    position: relative;
    width: 100%;
    &>.image-container{
        line-height:0;
    }
    &>div {
        z-index: 2;
        position: absolute;
        img {
            width: 100%;
        }
    }
    &>div.loaded {
        z-index: 1;
    }
}

.lazyload-image {
    &>div.flip-enter.flip-enter-active {
        animation: flip-enter .3s ease-in-out;
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }
    &>div.flip-leave.flip-leave-active {
        animation: flip-leave .5s ease-in-out;
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }
    &>div.fade-enter.fade-enter-active{
        opacity:1;
        transition:opacity .3s ease-in-out;
    }
    &>div.fade-leave.fade-leave-active{
        opacity:0;
        transition:opacity .5s ease-in-out;
    }
}

@keyframes flip-enter {
    from {
        opacity: 0;
        z-index: 1;
        transform: rotateY(180deg);
    }
    to {
        opacity: 1;
        z-index: 2;
        transform: rotateY(0deg);
    }
}

@keyframes flip-leave {
    from {
        opacity: 1;
        z-index: 2;
        transform: rotateY(0deg);
    }
    to {
        opacity: 0;
        z-index: 1;
        transform: rotateY(180deg);
    }
}