css动画使用keyframes

<!--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>

 

原文地址:
秒速时时彩 吉林快3 欢乐生肖 北京幸运28 澳洲幸运8 上海时时乐开奖 极速PK拾 北京11选5走势图 欢乐生肖 快乐时时彩