I found a job to do a web resume some time ago, and wanted to achieve the effect of a typewriter.
In theory, the first choice for animation effects like typewriters is jquery. After all, jquery is mainly used to operate dom, and vue is data-driven. However, jquery does not have plug-ins that can satisfy the functions I envisioned, and is lazy and does not want to implement two-way binding by itself, so I have to use vue to implement it myself.
The code is not very beautiful, I hope everyone doesn’t like it. I just provide an idea here.
Final effect
I‘m ByPunk!
I‘m looking for a job.
I‘m a front-end programmer.
I‘m coding the web…
The above four sentences are repeated in a cycle
The input and deletion are displayed in the effect of the typewriter. Since the previous I'm is the same, only the following content is modified.
1. Define the string str in advance: str='By Punk!', and use the split method of the array to decompose str into an array composed of letters.
2. Use the for loop to push a new letter into the array every 100 milliseconds, and use the two-way binding of vue to drive view updates.
3. Write a vertical bar "|" after the div that contains the letters and add a flashing animation to simulate the typewriter's cursor.
4. When pushing each time, determine whether the current index i is the last element of the array. If so, it will start to clear after 2 seconds.
5. The specific implementation of "delete" is exactly the opposite of "input", and the last item is popped from the array every 200 milliseconds.
6. Use the watch hook function to realize the loop repetition of four sentences.
The specific code is as follows
<template>
<div class="typer">
<div class="typer-content">
<p class="typer-static">I'm&nbsp;</p>
<!-- Dynamically changing content-->
<p class="typer-dynamic">
<span class="cut">
<span class="word" v-for="(letter,index) in words" :key="index">{{letter}}</span>
</span>
<!-- Analog cursor-->
<span class="typer-cursor"></span>
</p>
</div>
</div>
</template><script>
export default {
data () {
return {
words:[], //Alphabet array push, pop vector str:"By Punk", //str initialization letters:[], //Str decomposed alphabet array order:1, //Indicate what sentence is currently }
},
watch:{ // Listen to the change of order value and change the content of str order(old,newV){
if(%4==1){
="By Punk!"
}
else if(%4==2){
="looking for a job. "
}
else if(%4==3){
="a front-end programmer."
}
else{
="coding the web..."
}
}
},
mounted(){ //After the page is loaded for the first time, call begin() to start the animation ()
},
methods:{
//Start the effect animation of input begin(){
=("")
for(var i=0;i<;i++){
setTimeout((i),i*100);
}
},
//The effect animation started to be deleted back(){
let L=;
for(var i=0;i<L;i++){
setTimeout((i),i*50);
}
},
//Input letters write(i){
return ()=>{
let L=;
([i]);
let that=this;
/*If the input is completed, start deletion after 2s*/
if(i==L-1){
setTimeout(function(){
();
},2000);
}
}
},
//Erase (delete) letters wipe(i){
return ()=>{
([i]);
/*If the deletion is completed, start typing after 300ms*/
if(==0){
++;
let that=this;
setTimeout(function(){
();
},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>The above is personal experience. I hope you can give you a reference and I hope you can support me more.