.typed-cursormargin-left:10pxopacity:1-webkit-animation锛氶棯鐑?.7s鏃犻檺-moz-animation锛氶棯鐑?.7s鏃犻檺鍔ㄧ敾锛氶棯鐑?.7s鏃犻檺@keyframes闂儊0%涓嶉€忔槑搴︼細150%涓嶉€忔槑搴︼細0100%涓嶉€忔槑搴︼細1@-webkit-keyframes闂儊0%涓嶉€忔槑搴︼細150%涓嶉€忔槑搴︼細0100%涓嶉€忔槑搴︼細1@-moz-keyframes闂儊0%涓嶉€忔槑搴︼細150%涓嶉€忔槑搴︼細0100%涓嶉€忔槑搴︼細1easy-typer-js鏄潪甯稿己澶х殑鎵撳瓧鏈烘彃浠讹紝鍏煎鍘熺敓JS鍜孧VVM绫绘鏋讹紙Vue銆丷eact銆乤ngular锛夛紝杈撳嚭浠€涔堜綘鎯宠浣犳兂瑕佽緭鍑虹殑鍐呭銆傜壒鐐癸紙浼樺娍锛夋垜浠殑涓庡叾浠栫被浼肩殑鎵撳瓧鏈烘彃浠舵湁浣曚笉鍚岋紵1.鎴戜滑鐨勬墦瀛楁満涓嶆搷浣淒OM锛岄噸瑕佺殑浜嬫儏璇翠笁閬嶏紝涓嶆搷浣淒OM锛佷笉瑕佹搷绾礑OM锛佷笉瑕佹搷绾礑OM锛?.鎴戜滑鐨勬墦瀛楁満鍜孧VVM妗嗘灦鐨勭粨鍚堟晥鏋滃緢濂斤紒3.鎴戜滑鐨勬墦瀛楁満鍙槸鏀瑰彉鏁版嵁瀵硅薄鐨勮緭鍑猴紝骞舵病鏈夊DOM杩涜鎿嶄綔锛佸幓鎴戠殑绔欑偣鐪嬬湡瀹炴晥鏋?>褰皬鍛嗛殢绗?=1.鏁堟灉灞曠ずeasy-typer-js鏄竴娆捐交閲忕骇鎻掍欢锛岀敤浜庡疄鐜伴〉闈㈡枃瀛楃殑鎵撳瓧鏈烘晥鏋溿€備娇鐢ㄩ潪甯哥畝鍗曪紝鍙渶瑕佸嚑琛屼唬鐮佸氨鍙互瀹炵幇楂樺ぇ涓婄殑鎵撳瓧鏈烘晥鏋溿€傚畬缇庢敮鎸丮VVM妗嗘灦锛屽吋瀹瑰師鐢烰S銆備簩銆佷娇鐢╡asy-typer-js2.1寮曞叆easy-typer-js鏂规硶涓€锛欵S6妯″潡鍖栧紩鍏ワ紙瀹樻柟鎺ㄨ崘锛?/瀹夎npminstalleasy-typer-js--save鎴杫arnaddeasy-typer-js//寮曞叆importEasyTyperfrom'easy-typer-js'//瀹炰緥鍖朿onsttyped=newEasyTyper(obj,input,fn,hooks)鏂规硶浜岋細姝ｅ垯import//涓嬭浇鍒版湰鍦?scriptsrc="./easy-typer-js">//cdnimport2.2浣跨敤瀹冩槸浣犳渶寮哄ぇ鐨勬鍣紒2.2.1浣跨敤鍘熺敓JS鎵撳紑椤甸潰锛屼綘浼氬彂鐜伴粠鏄庡墠鐨勯粦鏆楁槸鏈€娣变笉瑙佸簳鐨勯粦鏆楋紒杩欏彞璇濇槸涓€涓瓧涓€涓瓧鎵撳嚭鏉ョ殑锛佸搰锛佹槸涓嶆槸寰堥叿锛乧onsttyping=newEasyTyper(obj,`榛庢槑鍓嶇殑榛戞殫鏄渶娣辩殑榛戞殫锛乣,instance=>{//鍥炶皟鍑芥暟//璇ュ洖璋冧竴鑸敤浜庤幏鍙栨柊鏁版嵁鐒跺悗寰幆杈撳嚭//instance{instanceEasyTyper}console.log(instance)//鎵撳嵃鍑哄疄渚嬪璞,(output,instance)=>{//閽╁瓙鍑芥暟//output{褰撳墠甯х殑杈撳嚭鍐呭}//instance{instanceEasyTyper}//閫氳繃閽╁瓙鍑芥暟鍔ㄦ€佹洿鏂癲om鍏冪礌document.getElementById('output').innerHTML=`${output}`})2.2.2鍦╒ue涓綘浼氬彂鐜版垜鎵撳紑椤甸潰浼氳鎵撳瓧鏈鸿緭鍑猴紒//鍔ㄦ€佺粦瀹?div>{{obj.output}}2.2.3鍦≧eact涓娇鐢ㄦ墦寮€椤甸潰锛屼綘浼氬彂鐜版垜鏄敤React鍒涘缓鐨勶紒杩欐槸绁炶鐨勶紒importEasyTyperfrom'easy-typer-js'classshowTextextendsReact.Component{constructor(props){super(props)this.state={output:'',typer:null}this.initTyper=this.initTyper.bind(this)this.changeOutput=this.changeOutput.bind(this)}initTyper(){//閰嶇疆瀵硅薄constobj={output:'',isEnd:false,speed:80,singleBack:false,sleep:0,type:'normal',backSpeed:40}//瀹炰緥鍖杢his.typer=newEasyTyper(obj,'IwascreatedbyReact!',this.completeAsentence,this.changeOutput)}//杈撳嚭瀹屾垚鍚庣殑鍥炶皟鍑芥暟completeAsentence(){console.log('杈撳嚭瀹屾垚锛丼ir!')}//hook鍑芥暟鍜宻etState缁撳悎changeOutput(output){this.setState(state=>({output:output}))}render(){return(
{this.state.output}
)}}2.3銆愬疄鎴樸€戣返琛岀湡鐞嗭紙瀹屾暣浠ｇ爜锛?.3.1Vue+Vuepress+涓€鍙ヨ瘽API===瀹炵幇鍗氬棣栭〉鐐叿鐨勬枃瀛楄緭鍑烘晥鏋滀笅闈㈡槸瀹屾暣浠ｇ爜锛侊紒锛?妯℃澘>
{{瀵硅薄銆傝緭鍑簘}|
.typed-cursormargin-left:10pxopacity:1-webkit-animation锛氶棯鐑?.7s鏃犻檺-moz-animation锛氶棯鐑?.7s鏃犻檺鍔ㄧ敾锛氶棯鐑?.7s鏃犻檺@keyframes闂儊0%涓嶉€忔槑搴︼細150%涓嶉€忔槑搴︼細0100%涓嶉€忔槑搴︼細1@-webkit-keyframes闂儊0%涓嶉€忔槑搴︼細150%涓嶉€忔槑搴︼細0100%涓嶉€忔槑搴︼細1@-moz-keyframes闂儊0%涓嶉€忔槑搴︼細150%涓嶉€忔槑搴︼細0100%涓嶉€忔槑搴︼細1鏁堟灉濡備笅锛屽氨鏄椤电湅鍒扮殑鏁堟灉锛?.3.2鍦≧eact涓鍏eactfrom'react'importlogofrom'./logo.svg'import'./App.css'importEasyTyperfrom'easy-typer-js'classshowTextextendsReact.Component{constructor(props){super(props)this.state={output:'',typer:null}this.initTyper=this.initTyper.bind(this)this.changeOutput=this.changeOutput.bind(this)}componentDidMount(){this.initTyper()}componentWillUnmount(){this.typer.close()}initTyper(){//閰嶇疆瀵硅薄constobj={output:'',isEnd:false,speed:80,singleBack:false,sleep:0,type:'normal',backSpeed:40}//瀹炰緥鍖杢his.typer=newEasyTyper(obj,'IwascreatedbyReact!',this.completeAsentence,this.changeOutput)}//杈撳嚭鍚庡洖璋冨嚱鏁癱ompleteAsentence(){console.log('杈撳嚭瀹屾垚锛丼ir!')}//閽╁瓙鍑芥暟鍜宻etState鍚堝苟changeOutput(output){this.setState(state=>({output:output}))}render(){return({this.state.output
绁?/a> 