Vue过渡与动画（一）

1.通过样式设置元素进入和离开过渡的效果

1. transition组件（给一个元素添加过渡效果）
   • 通过样式设置元素进入和离开过渡的效果

.v-enter
.v-enter-active
.v-enter-to

.v-leave
.v-leave-active
.v-leave-to

<template>
    <div>
        <transition>
            <div v-if="flag" class="box"></div>
        </transition>
    </div>
</template>



<style lang="scss" scoped>
    //默认为v-开头
    .v-enter{opacity:0}
    .v-enter-to{opacity:1}
    .v-enter-active{transition:all 1s ease;}

    .v-leave{opacity:1}
    .v-leave-to{opacity:0}
    .v-leave-active{transition:all 1s ease;}
</style>

<template>
    <div>
        <transition name="fade">
            <div v-if="flag" class="box"></div>
        </transition>
    </div>
</template>



<style lang="scss" scoped>
    //以fade-开头
    .fade-enter{opacity:0}
    .fade-enter-to{opacity:1}
    .fade-enter-active{transition:all 1s ease;}

    .fade-leave{opacity:1}
    .fade-leave-to{opacity:0}
    .fade-leave-active{transition:all 1s ease;}
</style>

<template>
    <div>
        <transition name="slide">
            <div v-if="flag" class="box"></div>
        </transition>
    </div>
</template>



<style lang="scss" scoped>
    @keyframes slideIn {
        from {
            transform:translate3d(-100px,0,0)
        }

        to {
            transform:translate3d(0,0,0)
        }
    }
    @keyframes slideOut {
        from {
            transform:translate3d(0,0,0)
        }

        to {
            transform:translate3d(-100px,0,0)
        }
    }
    //以slide-开头
    .slide-enter{}
    .slide-enter-to{}
    .slide-enter-active{animation: slideIn 1s ease;}

    .slide-leave{}
    .slide-leave-to{}
    .slide-leave-active{animation: slideOut 1s ease;}
</style>

//使用animate.css这个css动画库
//首先安装一下：npm install animate.css



<transition enter-active-class="animated zoomIn" leave-active-class="animated zoomOut">
    <div></div>
</transition>



<style lang="scss" scoped>
    @import "~animate.css/animate.css";
</style>

//mode有“in-out”,"out-in"
<transition name="fade" mode="in-out">
    <div></div>
</transition>



<style lang="scss" scoped>
    //此处省略，看前面的
</style>