How to do staggered animations without variants? #155
Description
I am trying to understand how staggered animations would work without variants. To me it is hard to understand why <AnimationPresence> is needed in the first place and why exit animations doesnt work without it. But then, within nested animations, do I need multiple <AnimationPresence> or just one?
For example, this staggered animation works for enter but not for exit:
<template>
<AnimatePresence>
<motion.ul v-if="isVisible">
<motion.li v-for="index in 5"
:key="index"
:initial="{ opacity: 0 }"
:animate="{ opacity: 1, transition: { delay: index * 0.05 } }"
:exit="{ opacity: 0, transition: { delay: (5-index) * 0.05 } }"
>
{{ index }}
</motion.li>
</motion.ul>
</AnimatePresence>
<template>Or what about this example where I want to animate within a nested div? Here enter animation works with v-if, but not with v-show (but I need to use v-show for SEO reasons):
<template>
<div v-show="isOpen">
<p>Hello world</p>
<ul>
<AnimatePresence>
<motion.li
v-for="(item, index) in menuItems"
:key="item.key"
:initial="{ opacity: 0 }"
:animate="{ opacity: 1, transition: { delay: index * 0.05 } }"
:exit="{ opacity: 0, transition: { delay: (5-index) * 0.05 } }"
>
{{ item.label }}
</motion.li>
</ul>
</div>
</template>Even tho I am looking for help here, please consider this as a feature request for the docs, too. The new docs seem really nice, but and especially staggered animation may need a bit more informations. Also I didnt find any information about variants. They are mentioned at a couple of points, like staggeredChildren, but I dont find an explanation on what they are and how to use them.