animation-iteration-count solo aplica un parpadeo (a veces) en la animación, esto paso en mi proyecto y en un ejemplo de la documentación oficial de vue3 al aplicar esta propiedad.
Hice estas pruebas para ejemplificar
.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>No sé si me perdí algún detalle en la documentación de vuejs3. ¿Tiene alguna forma especial de manejar esta propiedad? ¿Alguna idea de lo que sucede?
Tuve el mismo problema con Vue 2. Funciona con estas líneas, espero que esto te ayude:
-webkit-animation: example 1s 3; -moz-animation: example 1s 3; -o-animation: example 1s 3; -ms-animation: example 1s 3; animation: example 1s 3;No estoy seguro de por qué la iteración de animación no funciona con la transición de Vue, pero he iterado en fotogramas clave 3 veces.
Sé que no es el mejor enfoque para iterar, pero de alguna manera si te ayuda, entonces genial.
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>