@mixin motion-common() {
    animation-duration: .3s;
    animation-fill-mode: both;
}

@mixin make-motion($className, $keyframeName) {

    .#{$className}-enter-active,
    .#{$className}-appear {
        @include motion-common();
        animation-play-state: paused;
    }

    .#{$className}-leave-active {
        @include motion-common();
        animation-play-state: paused;
    }

    .#{$className}-enter-active,
    .#{$className}-appear {
        animation-name: $keyframeName + "In";
        animation-play-state: running;
    }

    .#{$className}-leave-active {
        animation-name: $keyframeName + "Out";
        animation-play-state: running;
    }
}

@import './move.scss';
@import './fade.scss';
@import './breadcrumb.scss';

.flip-list-move {
    transition: transform 0.4s;
}