Some time ago looking for work to do on the page resume, I want to achieve the effect of a typewriter. It stands to reason like a typewriter realize this choice is animated jquery, jquery, after all, is to operate dom-based, data-driven and vue, but the dog was not able to meet and jquery plugins I imagine the function, but also lazy and does not want to implement a two-way tie given to myself to achieve with vue. Write code that is not very nice, I hope you do not like do not spray, here is a thought.
最终效果：
I‘m ByPunk!
I‘m looking for a job.
I‘m a front-end programmer.
I‘m coding the web…
The above cycle is repeated four sentences, typewriter effect display input and delete, as I'm in front of the same, so only on the back of the contents to be amended.
1. Good predefined string str: str='By Punk!'using an array splitemethod str decomposed into an array of letters.
2. Use a for loop, every 100 milliseconds to array pusha new letter, the use of two-way binding vue, update data driven view updates.
3. After writing letters div accommodate a vertical bar “|”and plus flashing animation, simulation typewriter cursor.
4. push each time, it is determined the current index iis the last element of the array, if it is, then after 2 seconds are cleared.
5. "Delete" concrete realization with the "input" is just the opposite, every 200 milliseconds from the array from popthe last one.
6. Use watchhook function implemented cyclically repeated four sentences.
Specific code as follows:
<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>