在Vue中如何实现打字机的效果

前一段时间找工作做网页简历,想实现打字机的效果。

按理说像打字机这种动画效果的实现首选是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钩子函数实现四句话的循环重复。

具体代码如下

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

你可能感兴趣的:(在Vue中如何实现打字机的效果)