使用Vue实现半自动打字机特效

最近遇到一个需求就是使用Web网页实现打字机特效，网上搜了一下相关插件，发现不完全符合我们的需求，于是手写实现一个半自动的打字机。

1、源码如下

<template>
  <div class="type-writer">
    <p class="type-writer-line">{{ line_1.typewriter }}<i class="type-writer-cursor" v-if="line_1.visible" /></p>
    <p class="type-writer-line">{{ line_2.typewriter }}<i class="type-writer-cursor" v-if="line_2.visible" /></p>
    <p class="type-writer-line">{{ line_3.typewriter }}<i class="type-writer-cursor" v-if="line_3.visible" /></p>
    <p class="type-writer-line">{{ line_4.typewriter }}<i class="type-writer-cursor" v-if="line_4.visible" /></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 第一行文字
      line_1: {
        content: `git add '我的2023年度开端'`,
        typewriter: ``,
        index: 0,
        visible: false,
        timer: null
      },

      // 第二行文字
      line_2: {
        content: `git commit -m 'Hello,2023!'`,
        typewriter: ``,
        index: 0,
        visible: false,
        timer: null
      },

      // 第三行文字
      line_3: {
        content: `git pull`,
        typewriter: ``,
        index: 0,
        visible: false,
        timer: null
      },

      // 第四行文字
      line_4: {
        content: `git push`,
        typewriter: ``,
        index: 0,
        visible: false,
        timer: null
      },

      
    };
  },
  mounted() {
    this.typingLine_1(this.line_1)
  },
  methods: {
    /**
     * 打印第一行文字
     */
    typingLine_1(obj) {
      obj.visible = true
      if (obj.index <= obj.content.length) {
        obj.typewriter = obj.content.slice(0, obj.index ++)
        obj.timer = setTimeout(() => { this.typingLine_1(obj) }, 50)
      } else {
        clearTimeout(obj.timer)
        obj.visible = false
        this.typingLine_2(this.line_2);
      }
    },

    /**
     * 打印第二行文字
     */
    typingLine_2(obj) {
      obj.visible = true
      if (obj.index <= obj.content.length) {
        obj.typewriter = obj.content.slice(0, obj.index ++)
        obj.timer = setTimeout(() => { this.typingLine_2(obj) }, 50)
      } else {
        clearTimeout(obj.timer)
        obj.visible = false
        this.typingLine_3(this.line_3);
      }
    },

    /**
     * 打印第三行文字
     */
    typingLine_3(obj) {
      obj.visible = true
      if (obj.index <= obj.content.length) {
        obj.typewriter = obj.content.slice(0, obj.index ++)
        obj.timer = setTimeout(() => { this.typingLine_3(obj) }, 50)
      } else {
        clearTimeout(obj.timer)
        obj.visible = false
        this.typingLine_4(this.line_4);
      }
    },

    /**
     * 打印第四行文字
     */
    typingLine_4(obj) {
      obj.visible = true
      if (obj.index <= obj.content.length) {
        obj.typewriter = obj.content.slice(0, obj.index ++)
        obj.timer = setTimeout(() => { this.typingLine_4(obj) }, 50)
      } else {
        clearTimeout(obj.timer)
      }
    },
  },
};
</script>

<style lang="less" scoped>
.type-writer {
  width: auto;
  padding: 100px;
  background-color: #f9f2e1;

  p {
    height: 20px;
    line-height: 20px;
    font-size: 20px;
    margin: 7.5px 0;
    padding: 5px;
    background-color: #f5ecd7;
    position: relative;
    color: rgb(96, 109, 121);
    font-family: '楷体';
  }

  .type-writer-cursor {
    width: 0px;
    height: 100%;
    border-left: 2px solid transparent;
    animation: typing 3s steps(16) forwards, cursor 1s infinite;
    -webkit-animation: typing 3s steps(16) forwards, cursor 1s infinite;
  }
}

/* animation */
@keyframes typing {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@keyframes cursor {
  50% {
    border-color: #5e7ce0;
  }
}

@-webkit-keyframes typing {
  from {
    width: 100%;
  }
  to {
    width: 0;
  }
}
@-webkit-keyframes cursor {
  50% {
    border-color: #5e7ce0;
  }
}
/* / animation */
</style>

2、效果如下