How to animate single element?

[nestle49]

How to animate single element? For example

<template>
<div v-if="content">Content</div>

<button @click="content = !content">Toggle</button>
</template>

<script setup>
const content = true;
</script>

[Justin Schroeder]

You need to apply auto-animate to the whatever dom element is the parent of your content div 👍

[nestle49]

You need to apply auto-animate to the whatever dom element is the parent of your content div 👍

But it means redundant markup DOM, also empty elements if children are hidden

[Justin Schroeder]

there is almost always a parent element. If not, then you cannot use auto animate. You can just use the <Transition> component in vue.