Closed
Description
What problem does this feature solve?
Define two keyframes with same name in different scoped style tag,
the latter will replace the former.
ComponentA
<template>
<div class="active">ComponentA</div>
</template>
<style scoped lang="stylus">
.active
animation active 1s
@keyframes active
0%
transform translateY(0)
50%
transform translateY(100%)
100%
transform translateY(0)
</style>ComponentB
<template>
<div class="active">ComponentB</div>
</template>
<style scoped lang="stylus">
.active
animation active 1s
@keyframes active
0%
transform scale(1)
50%
transform scale(2)
100%
transform scale(1)
</style>The stylesheet of these two components will be compiled like this:
.active[data-v-HASH-OF-COMPOENT-A] {
animation: active 1s;
}
@keyframes active {
0% {
transform: scale(transform translateY(0));
}
50% {
transform: scale(transform translateY(100%));
}
100% {
transform: scale(transform translateY(0));
}
}
.active[data-v-HASH-OF-COMPOENT-B] {
animation: active 1s;
}
@keyframes active {
0% {
transform: scale(1);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}What does the proposed API look like?
The result of compilation might be like this:
.active[data-v-HASH-OF-COMPOENT-A] {
animation: active--HASH-OF-COMPOENT-A 1s;
}
@keyframes active--HASH-OF-COMPOENT-A {
...
}
.active[data-v-HASH-OF-COMPOENT-B] {
animation: active--HASH-OF-COMPOENT-B 1s;
}
@keyframes active--HASH-OF-COMPOENT-B {
...
}If there is no keyframes defination of current scope, The result might be like this case:
.active[data-v-HASH-OF-COMPOENT-A] {
animation: active--HASH-OF-PARENT-COMPOENT 1s;
}
.active[data-v-HASH-OF-COMPOENT-B] {
animation: active--HASH-OF-PARENT-COMPOENT 1s;
}If there is no keyframes defination of any parent scope, The result might be like this case:
.active[data-v-HASH-OF-COMPOENT-A] {
animation: active 1s;
}
.active[data-v-HASH-OF-COMPOENT-B] {
animation: active 1s;
}