Added animations

src/App.vue

@@ -6,11 +6,7 @@ import NavBar from './components/NavBar.vue'
 <template>
   <NavBar />
 
-  <RouterView v-slot="{ Component, route }">
-    <transition name="page" mode="out-in">
-      <component :is="Component" :key="route.path" />
-    </transition>
-  </RouterView>
+  <RouterView />
 </template>
 
 <style scoped>

src/components/MovieCard.vue

@@ -11,7 +11,6 @@ const props = defineProps<{
 const emit = defineEmits<{ (e: 'loaded', id: string): void }>()
 
 const store = useMoviesStore()
-
 const imageLoadFailed = ref(false)
 
 const alreadyAdded = computed(() =>
@@ -20,10 +19,10 @@ const alreadyAdded = computed(() =>
 </script>
 
 <template>
-  <div class="card card-side bg-base-100 shadow-md hover:shadow-lg transition rounded-sm">
+  <div class="card bg-base-100 shadow-sm hover:shadow-md transition rounded-sm w-full h-full">
     <router-link :to="{ name: 'details', params: { id: props.movie.imdbID } }">
-      <figure
-        class="overflow-hidden flex items-center justify-center bg-gray-100 aspect-[2/3] w-32 sm:w-40 md:w-48 rounded-l-sm"
+      <figure v-motion-fade-visible-once
+        class="overflow-hidden flex items-center justify-center bg-gray-100 aspect-[2/3] rounded-t-sm"
       >
         <span v-if="props.loading" class="loading loading-ring loading-xl text-primary"></span>
 
@@ -59,16 +58,22 @@ const alreadyAdded = computed(() =>
         />
       </figure>
     </router-link>
-    <div class="card-body p-4">
+
+    <div class="card-body p-4 flex flex-col">
       <router-link :to="{ name: 'details', params: { id: props.movie.imdbID } }">
         <h2 class="card-title text-lg">{{ props.movie.Title }}</h2>
         <p class="text-sm text-gray-500">{{ props.movie.Year }}</p>
       </router-link>
-      <div v-if="!alreadyAdded" class="card-actions justify-end mt-auto">
-        <button class="btn btn-sm btn-primary" @click="store.addMovie(props.movie)">Add</button>
-      </div>
-      <div v-else class="card-actions justify-end mt-auto">
-        <button class="btn btn-sm btn-error" @click="store.removeMovie(props.movie.imdbID)">
+
+      <div class="card-actions justify-end mt-auto">
+        <button
+          v-if="!alreadyAdded"
+          class="btn btn-sm btn-primary"
+          @click="store.addMovie(props.movie)"
+        >
+          Add
+        </button>
+        <button v-else class="btn btn-sm btn-error" @click="store.removeMovie(props.movie.imdbID)">
           Delete
         </button>
       </div>

src/components/MovieDetails.vue

@@ -25,7 +25,7 @@ const alreadyAdded = computed(() =>
     </div>
 
     <!-- Actual hero content -->
-    <div v-else class="hero bg-base-200 min-h-screen rounded-md">
+    <div v-else class="hero bg-base-200 min-h-screen rounded-md" v-motion-fade-visible-once>
       <div class="hero-content flex-col lg:flex-row gap-12">
         <!-- Poster -->
         <figure class="flex-shrink-0">

src/components/MovieList.vue

@@ -10,6 +10,7 @@ const props = defineProps<{
 }>()
 
 const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): void }>()
+
 </script>
 
 <template>
@@ -19,8 +20,11 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
       <RouterLink to="/add" class="text-black font-bold">Add a movie</RouterLink>
     </p>
 
-    <ul v-else class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
-      <li v-for="movie in props.movies" :key="movie.imdbID">
+    <ul v-auto-animate
+      v-else
+      class="grid gap-6 grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5"
+    >
+      <li v-for="movie in props.movies" :key="movie.imdbID" v-auto-animate>
         <MovieCard
           :movie="movie"
           :loading="props.loadingImages[movie.imdbID]"
@@ -28,13 +32,20 @@ const emit = defineEmits<{ (e: 'loaded', id: string): void; (e: 'loadMore'): voi
         />
       </li>
     </ul>
-    <div v-if="props.isSearch && props.movies.length > 0" class="flex justify-center mt-8">
+
+    <div
+      v-if="props.isSearch && props.movies.length > 0"
+      class="flex justify-center mt-8"
+    >
       <button
         class="btn btn-outline btn-secondary"
         @click="emit('loadMore')"
         :disabled="props.loadingMore"
       >
-        <span v-if="props.loadingMore" class="loading loading-spinner loading-xs mr-2"></span>
+        <span
+          v-if="props.loadingMore"
+          class="loading loading-spinner loading-xs mr-2"
+        ></span>
         Load more
       </button>
     </div>

src/main.ts

@@ -3,10 +3,15 @@ import { createPinia } from 'pinia'
 
 import App from './App.vue'
 import router from './router'
+import { autoAnimatePlugin } from '@formkit/auto-animate/vue'
+import { MotionPlugin } from '@vueuse/motion'
 
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(router)
 
+app.use(autoAnimatePlugin)
+app.use(MotionPlugin)
+
 app.mount('#app')

src/views/ListView.vue

@@ -19,6 +19,7 @@ onMounted(() => {
 <template>
   <div class="container mx-auto px-4 py-8">
     <MovieList
+      v-auto-animate
       v-if="store.movieList"
       :movies="store.movieList"
       :loading-images="loadingImages"