最近遇到一个需求就是使用Web网页实现打字机特效，网上搜了一下相关插件，发现不完全符合我们的需求，于是手写实现一个半自动的打字机。
1、源码如下
<template>
<div class="type-writer">
<p class="type-writer-line">{
{
line_1.typewriter }}<i class="type-writer-cursor" v-if="line_1.visible" /></p>
<p class="type-writer-line">{
{
line_2.typewriter }}<i class="type-writer-cursor" v-if="line_2.visible" /></p>
<p class="type-writer-line">{
{
line_3.typewriter }}<i class="type-writer-cursor" v-if="line_3.visible" /></p>
<p class="type-writer-line">{
{
line_4.typewriter }}<i class="type-writer-cursor" v-if="line_4.visible" /></p>
</div>
</template>
<script>
export default {
data() {
return {
// 第一行文字
line_1: {
content: `git add '我的2023年度开端'`,
typewriter: ``,
index: 0,
visible: false,
timer: null
},
// 第二行文字
line_2: {
content: `git commit -m 'Hello,2023!'`,
typewriter: ``,
index: 0,
visible: false,
timer: null
},
// 第三行文字
line_3: {
content: `git pull`,
typewriter: ``,
index: 0,
visible: false,
timer: null
},
// 第四行文字
line_4: {
content: `git push`,
typewriter: ``,
index: 0,
visible: false,
timer: null
},
};
},
mounted() {
this.typingLine_1(this.line_1)
},
methods: {
/**
* 打印第一行文字
*/
typingLine_1(obj) {
obj.visible = true
if (obj.index <= obj.content.length) {
obj.typewriter = obj.content.slice(0, obj.index ++)
obj.timer = setTimeout(() => {
this.typingLine_1(obj) }, 50)
} else {
clearTimeout(obj.timer)
obj.visible = false
this.typingLine_2(this.line_2);
}
},
/**
* 打印第二行文字
*/
typingLine_2(obj) {
obj.visible = true
if (obj.index <= obj.content.length) {
obj.typewriter = obj.content.slice(0, obj.index ++)
obj.timer = setTimeout(() => {
this.typingLine_2(obj) }, 50)
} else {
clearTimeout(obj.timer)
obj.visible = false
this.typingLine_3(this.line_3);
}
},
/**
* 打印第三行文字
*/
typingLine_3(obj) {
obj.visible = true
if (obj.index <= obj.content.length) {
obj.typewriter = obj.content.slice(0, obj.index ++)
obj.timer = setTimeout(() => {
this.typingLine_3(obj) }, 50)
} else {
clearTimeout(obj.timer)
obj.visible = false
this.typingLine_4(this.line_4);
}
},
/**
* 打印第四行文字
*/
typingLine_4(obj) {
obj.visible = true
if (obj.index <= obj.content.length) {
obj.typewriter = obj.content.slice(0, obj.index ++)
obj.timer = setTimeout(() => {
this.typingLine_4(obj) }, 50)
} else {
clearTimeout(obj.timer)
}
},
},
};
</script>
<style lang="less" scoped>
.type-writer {
width: auto;
padding: 100px;
background-color: #f9f2e1;
p {
height: 20px;
line-height: 20px;
font-size: 20px;
margin: 7.5px 0;
padding: 5px;
background-color: #f5ecd7;
position: relative;
color: rgb(96, 109, 121);
font-family: '楷体';
}
.type-writer-cursor {
width: 0px;
height: 100%;
border-left: 2px solid transparent;
animation: typing 3s steps(16) forwards, cursor 1s infinite;
-webkit-animation: typing 3s steps(16) forwards, cursor 1s infinite;
}
}
/* animation */
@keyframes typing {
from {
width: 100%;
}
to {
width: 0;
}
}
@keyframes cursor {
50% {
border-color: #5e7ce0;
}
}
@-webkit-keyframes typing {
from {
width: 100%;
}
to {
width: 0;
}
}
@-webkit-keyframes cursor {
50% {
border-color: #5e7ce0;
}
}
/* / animation */
</style>
2、效果如下
