animation-iteration-count only applies a blink (sometimes) in the animation, this happened in my project and in an example of the official documentation of vue3 when applying this property.
I did these tests to exemplify
.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>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>I don't know if I missed any details in the vuejs3 documentation Do you have any special way of dealing with this property? Any idea what happens?
I had the same issue with Vue 2. It works with these lines, hope this helps you :
-webkit-animation: example 1s 3;
-moz-animation: example 1s 3;
-o-animation: example 1s 3;
-ms-animation: example 1s 3;
animation: example 1s 3;
I am not sure why animation iteration is not working with Vue transition but I have iterated in keyframes for 3 times.
I know it is not best approach to iterate but somehow if it helps you then great.
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>