vue-animate/src/make-transitions.less

LESS cross-browser animation library, for use with Vue.js. Ported from Animate.css.

.make-transitions(@base, @names) {

    // We'll make a single rule for all transitions that
    // sets the animation duration. This is basically the
    // stock 'animate' class from Animate.css.
    @classesJoin: replace(~'@{names}', ', ', '-transition, .@{base}', g);

    .@{base}-transition, .@{base}@{classesJoin}-transition {
        animation-duration: @animationDuration;
        animation-fill-mode: both;
    }

    // Entrance/Exit for the base class
    .@{base}-enter, .@{base}In {
        animation-name: ~'@{base}In';
    }

    .@{base}-leave, .@{base}Out {
        animation-name: ~'@{base}Out';
    }

     // Loop through the different animations, and set
     // the enter/leave animation names for each class.
    .-(@i: length(@names)) when (@i > 0) {

        @name: extract(@names, @i);
        .@{base}@{name}-enter, .@{base}In@{name} {
            animation-name: ~'@{base}In@{name}';
        }
        .@{base}@{name}-leave, .@{base}Out@{name} {
            animation-name: ~'@{base}Out@{name}';
        }
        .-((@i - 1));

    } .-;
}