animation-iteration-count在vuejs3中不工作?

Question

animation-iteration-count只在动画中应用闪烁(有时)，这在我的项目和ve3的官方文档中应用此属性时发生过。

我做这些测试是为了说明

HTML + CSS

.a {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation: example 1s 3;
}
@keyframes example {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}

<h1>CSS Animation</h1>
<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation n times before it stops:</p>
<div class="a"></div>

VUEJS3

const app = Vue.createApp({
el: '#app',
data: function () {
return {
show: true
}
},
})
app.mount('#app')

.a {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}

@keyframes example {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.example-enter-active {
animation: example 0.5s;
animation-iteration-count: 3;
}
.example-leave-active {
animation: example .5s reverse;
}

<script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.prod.js"></script>
<div id="app">
<h1>CSS Animation</h1>
<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation n times before it stops:</p>
<button v-on:click="show=!show">{{show}}</button>
<transition appear name="example">
<div  v-if="show" class="a"></div>
</transition> 

</div>

我不知道我是否错过了vuejs3文档中的任何细节你有什么特殊的方法来处理这个财产吗?知道会发生什么吗?

Answer 1

我在Vue 2中遇到了同样的问题。它与这些行一起工作，希望这对您有所帮助:

-webkit-animation: example 1s 3;
-moz-animation: example 1s 3;
-o-animation: example 1s 3;
-ms-animation: example 1s 3;
animation: example 1s 3;

Answer 2

我不知道为什么动画迭代不能与Vue过渡一起工作，但我已经在关键帧中迭代了3次。

我知道这不是最好的迭代方法，但如果它对你有帮助，那就太好了。

const app = Vue.createApp({
el: '#app',
data: function () {
return {
show: true
}
},
})
app.mount('#app')

.a {
width: 100px;
height: 100px;
background-color: red;
position: relative;
}

@keyframes repeat-in {
0% {
transform: scale(0);
}
16%{
transform: scale(1.5);
}
32%{
transform: scale(1);
}
48%{
transform: scale(1.5);
}
64%{
transform: scale(1);
}
80%{
transform: scale(1.5);
}
100%{
transform: scale(1);
}
}
@keyframes repeat-out {
0% {
transform: scale(1);
}
16% {
transform: scale(1.5);
}
32% {
transform: scale(1);
}
48% {
transform: scale(1.5);
}
64%{
transform: scale(1);
}
80%{
transform: scale(1.5);
}      
100% {
transform: scale(0);
}
}
.repeat-in {
animation: repeat-in 2s ;
}
.repeat-out {
animation: repeat-out 2s ;
}

<script src="https://unpkg.com/vue@3.0.0-rc.5/dist/vue.global.prod.js"></script>
<div id="app">
<h1>CSS Animation</h1>
<p>The animation-iteration-count property specifies the number of times an animation should run. The following example will run the animation n times before it stops:</p>
<button v-on:click="show=!show">{{show}}</button>
<transition appear name="example"  enter-active-class="repeat-in"
leave-active-class="repeat-out">
<div  v-if="show" class="a"></div>
</transition> 

</div>