Vue实现半自动打字机特效
作者：帅龍之龍
本文主要介绍了Vue实现半自动打字机特效,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
最近遇到一个需求就是使用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、效果如下
到此这篇关于Vue实现半自动打字机特效的文章就介绍到这了,更多相关Vue 半自动打字机内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！