Add `:visible-once` variant

Related to https://github.com/vueuse/motion/issues/25, it would be great to be able to trigger an animation when visible only once. I suggest adding a new variant for that but it could be an attribute like once.

[florian-lefebvre]

Meanwhile, I managed to reproduce this effect with the following (using Nuxt 3):

<!-- components/FadeAnimation.vue -->
<template>
  <div ref="el">
    <slot />
  </div>
</template>

<script lang="ts" setup>
import { useMotion } from "@vueuse/motion";

const el = ref<HTMLElement>();

const { stop } = useMotion(el, {
  initial: {
    opacity: 0,
  },
  visible: {
    opacity: 1,
    transition: {
      delay: 300,
      duration: 500,
      onComplete: () => stop(),
    },
  },
});
</script>

[HassanZahirnia]

Hey @florian-lefebvre 👋 Thanks for bringing up the idea of having such variant. 👍 I was also looking for a way to only apply animations once when they enter the viewport. I know you already did the hard work and made a PR, but I also tried to do one here: #50 I noticed your PR also adds a bunch of different presets so I thought I’m just gonna focus on this 1 single variant which we was discussed here so maybe @Tahul can have an easier time to consider merging this feature.