Vue实现打字机效果
但心情怎会无恙 人气:0前一段时间找工作做网页简历，想实现打字机的效果。
按理说像打字机这种动画效果的实现首选是jquery，毕竟jquery还是以操作dom为主，而vue是数据驱动，但是jquery并没有能狗满足我设想的功能的插件，又偷懒不想自己实现双向绑定，只好自己用vue实现。
代码写的不是很漂亮，希望大家不喜勿喷，这里只是提供一个思路。
最终效果
I‘m ByPunk!
I‘m looking for a job.
I‘m a front-end programmer.
I‘m coding the web…
以上四句话循环重复
以打字机的效果显示输入和删除，因为前面的I‘m是相同的，所以只对后面的内容加以修改。
1.事先定义好字符串str：str='By Punk!'，使用数组的splite方法将str分解成由字母组成的数组。
2.利用for循环，每100毫秒向数组里push一个新的字母，利用vue的双向绑定，数据更新带动视图更新。
3.在容纳字母的div后写一个竖杠“|”并加上不断闪烁的动画，模拟打字机光标。
4.在每次push的时候，判断当前的索引i是否是数组的最后一个元素，如果是，则在2秒后开始清除。
5.“删除”具体实现跟“输入”刚好相反，每200毫秒从数组从pop出最后一项。
6.使用watch钩子函数实现四句话的循环重复。
具体代码如下
<template>
<div class="typer">
<div class="typer-content">
<p class="typer-static">I'm </p>
<!-- 动态变化的内容-->
<p class="typer-dynamic">
<span class="cut">
<span class="word" v-for="(letter,index) in words" :key="index">{{letter}}</span>
</span>
<!-- 模拟光标-->
<span class="typer-cursor"></span>
</p>
</div>
</div>
</template><script>
export default {
data () {
return {
words:[], //字母数组push，pop的载体
str:"By Punk", //str初始化
letters:[], //str分解后的字母数组
order:1, //表示当前是第几句话
}
},
watch:{ //监听order值的变化，改变str的内容
order(old,newV){
if(this.order%4==1){
this.str="By Punk!"
}
else if(this.order%4==2){
this.str="looking for a job. "
}
else if(this.order%4==3){
this.str="a front-end programmer."
}
else{
this.str="coding the web..."
}
}
},
mounted(){ //页面初次加载后调用begin()开始动画
this.begin()
},
methods:{
//开始输入的效果动画
begin(){
this.letters=this.str.split("")
for(var i=0;i<this.letters.length;i++){
setTimeout(this.write(i),i*100);
}
},
//开始删除的效果动画
back(){
let L=this.letters.length;
for(var i=0;i<L;i++){
setTimeout(this.wipe(i),i*50);
}
},
//输入字母
write(i){
return ()=>{
let L=this.letters.length;
this.words.push(this.letters[i]);
let that=this;
/*如果输入完毕，在2s后开始删除*/
if(i==L-1){
setTimeout(function(){
that.back();
},2000);
}
}
},
//擦掉(删除)字母
wipe(i){
return ()=>{
this.words.pop(this.letters[i]);
/*如果删除完毕，在300ms后开始输入*/
if(this.words.length==0){
this.order++;
let that=this;
setTimeout(function(){
that.begin();
},300);
}
}
},
},
}
</script><style scoped lang="less">
@thePink:#e84d49;
.typer{
margin-top: 2%;
box-sizing: border-box;
}
.typer .typer-content{
font-weight: bold;
font-size: 50px;
display: flex;
flex-direction: row;
letter-spacing: 2px }
.typer-dynamic{
position: relative;
}
.cut{
color: @thePink;
}
.typer-cursor{
position: absolute;
height: 100%;
width: 3px;
top: 0;
right: -10px;
background-color: @thePink;
animation: flash 1.5s linear infinite;
}
</style>以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
加载全部内容