vue-transition动画标签

<template>
    <div>
        <!-- 内容 -->
        <transition name="moveCartoon" appear>
        </transition>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    created() {
    },
}
</script>

<style scoped>
/* 类名要对应回 name 的属性值 */
.moveCartoon-enter-active {
    animation: move .2s;
}

.moveCartoon-leave-active {
    animation: move .2s reverse;
}

@keyframes move {
    from {
        transform: translateX(-100%);
    }

    to {
        transform: translate(0);
    }
}
</style>

1. name 属性：用于自动生成 CSS 动画类名。如果 transition 标签元素没有设置 name 属性，则对应的动画类名为 v-XXX；如果设置了 name 属性，则对应的动画类名为 属性值-XXX。

2. appear 属性：一开始就生效显示动画