vue transition 封装

<template>
    <transition :name="activeName">
        <slot v-if="value"></slot>
    </transition>
</template>

<script>
    export default {
        name: "index",
        props:{
            value:{
                type:Boolean,
                default:true
            },
            activeName:{
                type:String,
                default: 'fadeyc'
            }
        }
    }
</script>

<style scoped lang="scss">
    .fadeyc-enter {
        transform: translateX(150%);
    }

    .fadeyc-enter-active {
        transition: all 1.5s;
        animation: leftToRight 1.5s;
    }

    .fadeyc-enter-to {
        transform: translateX(0);
    }

    .fadeyc-leave {

    }

    .fadeyc-leave-active {
        transition: all 1.5s;
        animation: leftToRightRight 1.5s;
    }

    .fadeyc-leave-to {
        transform: translateX(-150%);
    }

    


    /*缩放应用*/
    .scale-enter-active{
        animation: bounce-in 1s;
    }

    .scale-leave-active{
        animation: bounce-out 1s;
    }
    /*缩放*/
    @keyframes bounce-in {
        0% {
            transform: scale(0);
        }
        /*50% {*/
        /*    transform: scale(0.5);*/
        /*}*/
        100% {
            transform: scale(1);
        }
    }
    @keyframes bounce-out {
        0% {
            transform: scale(1);
        }
        /*50% {*/
        /*    transform: scale(1.5);*/
        /*}*/
        100% {
            transform: scale(0);
        }
    }


    /*右滑动*/
    .rightTo-enter-active {
        animation: leftToRight 1.5s;
    }
    .rightTo-leave-active{
        animation: leftToRightRight 1.5s;
    }
    @keyframes leftToRight {
        0%{
            transform: translateX(150%);
        }
        100%{
            transform: translateX(0);
        }
    }
    @keyframes rightToLeft {
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(-150%);
        }
    }
    @keyframes leftToRightRight {
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(150%);
        }
    }


    /*左滑动*/
    .leftTo-enter-active {
        animation: leftToIn 1s;
    }
    .leftTo-leave-active{
        animation: leftToOut 1s;
    }
    @keyframes leftToIn {
        0%{
            transform: translateX(-100%);
        }
        100%{
            transform: translateX(0);
        }
    }
    @keyframes leftToOut {
        0%{
            transform: translateX(0);
        }
        100%{
            transform: translateX(-100%);
        }
    }




    /*渐隐*/
    .opacity-enter-active {
        animation: opacity-in 3s;
    }
    .opacity-leave-active{
        animation: opacity-out 2.5s;
    }
    @keyframes opacity-in {
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    @keyframes opacity-out {
        0%{
            opacity: 1;
        }
        100%{
            opacity: 0;
        }
    }

    /*下面的上下*/

    .updown-enter-active{
        animation: updown-up 1s;

    }
    .updown-leave-active{

        animation: updown-down 1s;
    }
    @keyframes updown-up {
        0%{
            transform: translateY(100%);
        }
        100%{
            transform: translateY(0);
        }

    }

    @keyframes updown-down {
        0%{
            transform: translateY(0);
        }
        100%{
            transform: translateY(100%);
        }

    }

    /*上面的上下*/

    .downup-enter-active{
        animation: downup-up 1s;
    }
    .downup-leave-active{
        animation: downup-down 1s;
    }


    @keyframes downup-up {
        0%{
            transform: translateY(-100%);
        }
        100%{
            transform: translateY(0);
        }

    }

    @keyframes downup-down {
        0%{
            transform: translateY(0);
        }
        100%{
            transform: translateY(-100%);
        }

    }




</style>