Vue實現(xiàn)半自動打字機特效

更新時間：2023年12月10日 08:24:57 作者：帥龍之龍

本文主要介紹了Vue實現(xiàn)半自動打字機特效,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

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>