7. vue animation library

• 예시 코드 - 코드 샌드박스

App.vue

<script setup>
import { vAutoAnimate } from "@formkit/auto-animate";
import { useAutoAnimate } from "@formkit/auto-animate/vue";
import { ref } from "vue";

const isOpen = ref(false);
const [wrapperEl] = useAutoAnimate();
</script>

<template>
  <div v-auto-animate="{ duration: 1000, easing: 'linear' }">
    <p v-if="isOpen" class="py-8 phrase">I'm close to 20k so please.</p>
  </div>
  <div v-auto-animate class="p-8 rounded-lg bg-neutral-900">
    <h2 @click="isOpen = !isOpen" class="text-xl font-bold">
      Why you should animate
    </h2>
    <p v-if="isOpen" class="py-8 phrase">I'm close to 20k so please.</p>
  </div>
  <div ref="wrapperEl">
    <p v-if="isOpen" class="py-8 phrase">I'm close to 20k so please.</p>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.phrase {
  font-size: 16px;
  color: #000;
}
</style>