Vue-Typed-JS打字动画效果实现全过程

npm install vue-typed-js
# 或
yarn add vue-typed-js

import Vue from 'vue';
import VueTypedJs from 'vue-typed-js';

Vue.use(VueTypedJs);

<template>
  <vue-typed-js :strings="['Hello World', 'Welcome to Vue Typed JS']">
    <h1 class="typing"></h1>
  </vue-typed-js>
</template>

<template>
  <vue-typed-js
    :strings="['Option 1', 'Option 2']"
    :typeSpeed="50"
    :backSpeed="30"
    :loop="true"
  >
    <span class="typing"></span>
  </vue-typed-js>
</template>

<template>
  <vue-typed-js
    @onComplete="handleComplete"
    @preStringTyped="handlePreTyped"
  >
    <p class="typing"></p>
  </vue-typed-js>
</template>

<script>
export default {
  methods: {
    handleComplete() {
      console.log('Animation completed');
    },
    handlePreTyped(stringIndex) {
      console.log(`Typing string ${stringIndex}`);
    }
  }
};
</script>

<template>
  <vue-typed-js ref="typed" :strings="initialStrings">
    <div class="typing"></div>
  </vue-typed-js>
  <button @click="updateText">更新文本</button>
</template>

<script>
export default {
  data() {
    return {
      initialStrings: ['Initial Text']
    };
  },
  methods: {
    updateText() {
      //this.$refs.typed.$typed 实例
      this.$refs.typed.options.strings = ['New Text'];
      this.$refs.typed.typed.reset(); // 重置动画
    }
  }
};
</script>

.typed-cursor {
  opacity: 1;
  color: #42b983;
  animation: blink 0.7s infinite;
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

// 需要先重置再更新
this.$refs.myTyped.$typed.strings = ["新文本1", "新文本2"];
this.$refs.myTyped.$typed.reset().start();

this.$refs.myTyped.$typed.on('complete', () => {
  console.log('动画完成');
});