artistry/src/styl/animation/transition.styl

A powerful and configurable stylesheet

// Transitions

[data-transition] {
    visibility: visible;

    &[data-direction="in"] {
        visibility: visible;
    }

    &[data-direction="out"] {
        visibility: hidden;
    }
}

[data-transition="fade"] {
    transition: opacity $transition-duration, visibility $transition-duration;
    opacity: 1;

    &[data-direction="in"] {
        opacity: 1;
    }

    &[data-direction="out"] {
        opacity: 0;
    }
}

[data-transition="slide-top"] {
    transition: transform $transition-duration, visibility $transition-duration;
    transform: translate3d(0, 0, 0);

    &[data-direction="in"] {
        transform: translate3d(0, 0, 0);
    }

    &[data-direction="out"] {
        transform: translate3d(0, -100%, 0);
    }
}

[data-transition="slide-right"] {
    transition: transform $transition-duration, visibility $transition-duration;
    transform: translate3d(0, 0, 0);

    &[data-direction="in"] {
        transform: translate3d(0, 0, 0);
    }

    &[data-direction="out"] {
        transform: translate3d(100%, 0, 0);
    }
}

[data-transition="slide-bottom"] {
    transition: transform $transition-duration, visibility $transition-duration;
    transform: translate3d(0, 0, 0);

    &[data-direction="in"] {
        transform: translate3d(0, 0, 0);
    }

    &[data-direction="out"] {
        transform: translate3d(0, 100%, 0);
    }
}

[data-transition="slide-left"] {
    transition: transform $transition-duration, visibility $transition-duration;
    transform: translate3d(0, 0, 0);

    &[data-direction="in"] {
        transform: translate3d(0, 0, 0);
    }

    &[data-direction="out"] {
        transform: translate3d(-100%, 0, 0);
    }
}

[data-transition="fade-top"] {
    transition: opacity $transition-duration, transform $transition-duration, visibility $transition-duration;
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &[data-direction="in"] {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    &[data-direction="out"] {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

[data-transition="fade-right"] {
    transition: opacity $transition-duration, transform $transition-duration, visibility $transition-duration;
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &[data-direction="in"] {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    &[data-direction="out"] {
        opacity: 0;
        transform: translate3d(100%, 0, 0);
    }
}

[data-transition="fade-bottom"] {
    transition: opacity $transition-duration, transform $transition-duration, visibility $transition-duration;
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &[data-direction="in"] {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    &[data-direction="out"] {
        opacity: 0;
        transform: translate3d(0, 100%, 0);
    }
}

[data-transition="fade-left"] {
    transition: opacity $transition-duration, transform $transition-duration, visibility $transition-duration;
    opacity: 1;
    transform: translate3d(0, 0, 0);

    &[data-direction="in"] {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }

    &[data-direction="out"] {
        opacity: 0;
        transform: translate3d(-100%, 0, 0);
    }
}