🚀 Simplify directives for animations

[StevenJPx2]

Description

Currently this is how you would want to create a baked text-split animation to translate lines from the bottom:

<h1
  v-split-animate="{
    baked: true,
    options: {
      splitBy: 'lines',
      animationOptions: { translate: true },
    },
  }"
>
  Nuxt is so cool
</h1>

This is a lot to do just one thing. Code often gets longer and verbose.

Solution

Apply the settings to the directive name itself, for example:

<h1 v-text-animate-baked-lines="{ translate: true, opacity: 'out' }">
  Nuxt is so cool
</h1>

Furthermore, we can have multiple entry types for values:

<h1 v-text-animate-baked-lines="['translate', { opacity: 'out' }]">
  Nuxt is so cool
</h1>

Implementation details

[StevenJPx2]

Closed with v1.0.0-beta.0.