VueJs 更改文本动画在 iOS 设备上不起作用

【问题标题】：VueJs changing text-animation does not work on iOS devicesVueJs 更改文本动画在 iOS 设备上不起作用
【发布时间】：2021-06-05 11:59:14
【问题描述】：

我有一个动画应该无限更改文本并运行 7 秒，问题是它在 iOS 设备上不起作用。

<template>
  <div class="J-container">
  <p>Discover your next location for your <span class="changetext"></span></p>
  </div>
</template>

<script>
export default {
    
}
</script>

<style scoped>
.J-container p {
  font-size: 2.7rem;
  font-weight: 600;
  max-width: 600px;
  line-height: 4rem;
}

.changetext::before {
  content: '';
  animation: effectchange 7s infinite;
}

@keyframes effectchange {
  0% {
    content: 'Video Shoot'
  }

  33% {
    content: 'Events'
  }

  66% {
    content: 'House Party'
  }

  100% {
    content: 'Video Shoot'
  }
}
</style>

上面的代码可以在here找到，它不适用于iOS设备。

【问题讨论】：

标签： css vue.js nuxt.js

【解决方案1】：

很遗憾，iOS Safari 浏览器不支持 :before 和 :after 伪动画。（参考caniuse）

由于不支持，您可以使用 JavaScript 来实现类似的功能。

在这里，在下面的代码中，我正在切换wordDir 数组中声明的单词，然后，如果计数器达到最大长度，则我们重置回 0。

const toggleWord = document.querySelector('p span');
const wordDir = ['Word 1', 'Word 2', 'Word 3'];
let counter = 0;

setInterval(() => {
  if(counter > (wordDir.length - 1)) {
    counter = 0;
  }

  toggleWord.textContent = wordDir[counter];
  counter++;
}, 1000);

p {
  font-family: arial;
  font-size: 18px;
}

<div>
  <p>Hello World! <span>Word 1</span></p>
</div>

【讨论】：