您好,登录后才能下订单哦!
本篇内容介绍了“在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>
“在Vue中怎么实现打字机的效果”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。