vue实现逐字显示
Vue 实现逐字显示效果
逐字显示（Typing Effect）是一种常见的动画效果，可以通过 Vue 结合 CSS 或 JavaScript 实现。以下是几种实现方法：
方法一：使用 CSS 动画
通过 CSS 的 @keyframes 和 steps() 函数实现逐字显示效果。
<template>
<div class="typing-effect">{{ displayedText }}</div>
</template>
<script>
export default {
data() {
return {
text: "Hello, this is a typing effect.",
displayedText: ""
};
},
mounted() {
this.typeText();
},
methods: {
typeText() {
let i = 0;
const timer = setInterval(() => {
if (i < this.text.length) {
this.displayedText += this.text.charAt(i);
i++;
} else {
clearInterval(timer);
}
}, 100); // 调整速度
}
}
};
</script>
<style>
.typing-effect {
border-right: 2px solid #000;
white-space: nowrap;
overflow: hidden;
animation: blink 0.75s step-end infinite;
}
@keyframes blink {
from, to { border-color: transparent }
50% { border-color: #000 }
}
</style>方法二：使用 Vue 过渡
结合 Vue 的过渡系统实现更平滑的效果。
<template>
<transition name="typing">
<span v-for="(char, index) in text" :key="index" class="char">
{{ char }}
</span>
</transition>
</template>
<script>
export default {
data() {
return {
text: "Hello, this is a typing effect."
};
}
};
</script>
<style>
.char {
opacity: 0;
animation: fadeIn 0.1s forwards;
}
@keyframes fadeIn {
to { opacity: 1 }
}
.char:nth-child(1) { animation-delay: 0.1s }
.char:nth-child(2) { animation-delay: 0.2s }
.char:nth-child(3) { animation-delay: 0.3s }
/* 继续为每个字符设置延迟 */
</style>方法三：使用第三方库
可以借助现成的 Vue 插件如 vue-typer 快速实现。
安装：
npm install vue-typer使用：
<template>
<vue-typer text="Hello, this is a typing effect."></vue-typer>
</template>
<script>
import { VueTyper } from 'vue-typer';
export default {
components: { VueTyper }
};
</script>注意事项
- 调整定时器间隔控制打字速度
- 考虑添加光标闪烁效果增强真实感
- 对于长文本需要优化性能，避免过多 DOM 操作
- 移动端需测试兼容性
以上方法可根据具体需求选择，CSS 方案性能较好，JavaScript 方案更灵活，第三方库最便捷。
