动画迭代计数在 vuejs3 中不起作用？答案

【问题标题】：animation-iteration-count not working in vuejs3?动画迭代计数在 vuejs3 中不起作用？
【发布时间】：2021-12-08 19:48:13
【问题描述】：

animation-iteration-count 仅在动画中应用眨眼（有时），这发生在我的项目中，并且在应用此属性时出现在 vue3 的官方文档示例中。

我做了这些测试来举例说明

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 文档中的任何细节你有什么特殊的方式来处理这个属性吗？知道会发生什么吗？

【问题讨论】：

如果我不明白你的问题，每次转换之间的闪烁来自：0% { transform: scale(0); }

标签： css vue.js css-animations vuejs3

【解决方案1】：

我不确定为什么动画迭代不适用于 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>

【讨论】：

【解决方案2】：

我在使用 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;

【讨论】：