nested + staggered start the animation of the second parent only when the first has finish ? about animxyz HOT 5 CLOSED

Hi, unfortunately that doesn't solve the main issue which is the new line in a word

that why I must have 2 loops: one for the word and a second, nested, for the char in the word.

<span
  v-for="(word, index_word) in article.title.split(' ')"
  :key="index_word"
  style="display: inline-block"
>
  <template v-if="index_word != 0">&nbsp;</template
  ><span
    v-for="(char, index_char) in word"
    :key="`${index_word}-${index_char}`"
    >{{ char === " " ? "&nbsp;" : char }}</span
  >
</span>

the main issue now is compute from article.title, word, index_word, char and index_char the index of the letter in article.title, so I could apply the index to --xyz-index or to --xyz-delay .
Any hint about how compute the index ?

Thanks for writing this library 👍

from animxyz.

You should be able to do this using a computed property? https://vuejs.org/v2/guide/computed.html
Basically you can map the title to a nested array where each char is associated with a global index.

Check out the last example in the codesandbox I updated: https://codesandbox.io/s/animxyz-letters-stagger-example-1rq8b?file=/src/App.vue

from animxyz.

Hi Flapili! There are two ways to fix this which I have put in the linked CodeSandbox.

Approach 1: Use an XyzTransition component and give each span an xyz-nested class and add an --xyz-index (This is because the default CSS only sets the index for the first 20 elements).

Approach 2: Use an XyzTransitionGroup component wrapping the spans.

https://codesandbox.io/s/animxyz-letters-stagger-example-1rq8b?file=/src/App.vue

from animxyz.

Let me know if this solves your issue or if you have any additional questions! Thanks for using our library and for helping us improve it.

from animxyz.

Note that for appear animations only you can do it without an XyzTransition or XyzTransitionGroup component if you want. Those are mostly helpful if the content is dynamic and you want in and out animations as elements are added and removed.

from animxyz.