50css @keyfames 动画效果

css @keyfames 动画效果

CSS定义动画

.come{animation:frameName 2s ;}
.go{animation:frameName 2s reverse;}

@keyframes frameName {
    from {transform: translateX(-100%);}		        /* 起始位置 */
    to {transform: translateX(0);}				/* 终止位置 */
}

animation：
	- 使用简写属性，将动画与元素绑定：
@keyframes：
	- 通过 @keyframes 规则，您能够创建动画。

Vue transistion 标签与动画帧定义动画

transistion：显示过度效果；
	- name: 定义标签名称
	- appear：定义开始是否加载动画:bool

@keyframes frameName {}
	- transform: translateX(-100%);
	- animation:frameName 1s linear reverse;

<template>
    <div>
        <button @click="isShow = !isShow">点击变化</button>
        <transition>
            <h1 v-show="isShow">你好呀！</h1>
        </transition>
    </div>
</template>

<script>
    export default {
        name:'Test',data() {return {isShow: true}}
    }
</script>

<style scoped>
    h1{background-color:yellow;}

    /* 入场离场动画（未命名 transition） */
    .v-enter-active{animation:frameName 1s linear;}
    .v-leave-active{animation:frameName 1s linear reverse;}
    
    /* 入场离场动画（定义name transition） */
    .alex-enter-active{animation:frameName 1s linear;}
    .alex-leave-active{animation:frameName 1s linear reverse;}
    
    /* 定义动画帧 */
    @keyframes frameName {
        from {transform: translateX(-100%);}		        /* 起始位置 */
        to {transform: translateX(0);}				/* 终止位置 */
    }
</style> 

Vue 规则与 css transition 属性 定义动画

过渡动画定义：
	v-enter						v-leave
	v-enter-active				        v-leave-active
	v-enter-to					v-leave-to

# transition 标签中name不填，则默认“v“，否则 name 将代替 ”v“

<style scoped>
	h1{
        background-color:yellow;
    }

    /* 过渡进入的起始位置,  过渡退出的终止位置*/
    .alex-enter , .alex-leave-to{
        transform: translateX(-100%);
    }
    /* 过渡的active */
    .alex-enter-active, .alex-leave-active {
        transition: 0.5s linear;       
    }

    /* 过渡结束的终止位置,  过渡进入的起始位置 */
    .alex-enter-to, .alex-leave {
        transform: translateX(0);
    }
</style> 

# 当多次点击动画时，过渡的效果要比直接的动画帧要好。

Vue中多个元素过渡

多个元素使用同一套动画。使用transition-group标签的几个条件

• 子元素必须有key值

<transition-group>
</transition-group>

<transition-group name="alex" appear>
    <h1 v-show="!isShow" key="1">你好呀！</h1>
    <h1 v-show="isShow" key="2">你好teo！</h1>
</transition-group>