css动画使用keyframes

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Smile_Monica/article/details/82970682

<!--css动画keyframes-->
<template>
    <div>
        <transition name="fade">
            <div v-if="show">我是为了演示动画效果的哈</div>
        </transition>
        <button @click="handleClick">点我看动画</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            show:false,
        }
    },
    methods:{
        handleClick(){
            this.show = !this.show;
        }
    }
}
</script>

<style>
@keyframes bounce-in {
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}
.fade-enter-active{
    transform-origin: left center;
    animation: bounce-in 1s;
}

.fade-leave-active{
    transform-origin: left center;
    animation: bounce-in 1s reverse;
}
</style>

上面的代码等于下面的代码

<!--css动画keyframes-->
<template>
    <div>
        <transition name="fade" 
            enter-active-class="active"
            leave-active-class="leave">
            <div v-if="show">我是为了演示动画效果的哈</div>
        </transition>
        <button @click="handleClick">点我看动画</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            show:false,
        }
    },
    methods:{
        handleClick(){
            this.show = !this.show;
        }
    }
}
</script>

<style>
@keyframes bounce-in {
    0%{
        transform: scale(0);
    }
    50%{
        transform: scale(1.5);
    }
    100%{
        transform: scale(1);
    }
}
.active{
    transform-origin: left center;
    animation: bounce-in 1s;
}

.leave{
    transform-origin: left center;
    animation: bounce-in 1s reverse;
}
</style>

使用animate.css

可复制代码：

<!--css动画keyframes-->
<template>
    <div>
        <transition name="fade" 
            enter-active-class="animated swing"
            leave-active-class="animated shake">
            <div v-if="show">我是为了演示动画效果的哈</div>
        </transition>
        <button @click="handleClick">点我看动画</button>
    </div>
</template>

<script>
export default {
    data(){
        return{
            show:false,
        }
    },
    methods:{
        handleClick(){
            this.show = !this.show;
        }
    }
}
</script>

<style lang="scss" scoped>
@import url(./animate.css);
</style>