Как сделать эффект печати?

Question

[wiyod]

Хочу сделать эффект печатания текста средствами Вью, как тут - https://github.com/mattboldt/typed.js/

Но почему то string строится не "печатаясь" постепенно, а одни разом. Как сделать изменение текста по буквам? https://codepen.io/kodej/pen/gGERPR

Answer 1

[0xD34F]

Добавляете свойство, которое будет указывать, сколько символов надо показать:

data: () => ({
  showChars: 0,
  ...
}),

Вырезаете соответствующее количество символов из полной строки и отображаете:

computed: {
  typedString() {
    return this.string.slice(0, this.showChars);
  },
},

<h2>{{ typedString }}</h2>

Запускаете интервал, по которому увеличиваете длину отображаемой строки:

mounted() {
  const intervalID = setInterval(() => {
    if (++this.showChars === this.string.length) {
      clearInterval(intervalID);
    }
  }, 50);
},

https://jsfiddle.net/397wqoby/

Comments

[wiyod]

Да! Благодарю в очередной раз!

[wiyod]

А почему происходит при рефреше мелькание {{}}? v-cloak не помог.

[0xD34F]

wiyod, какое мелькание, где?

[wiyod]

0xD34F, при обновлении страницы, видно усы. Не каждый раз, но видно. Может кодпен тупит, надо локально попробовать. В принципе прелоадер будет висеть все равно, но непонятно почему так?

[0xD34F]

А, это. Говорят, v-cloak сам по себе ничего не делает, надо ему css определить.

[wiyod]

0xD34F, точно. Очередной мой недосмотр. Спасибо.