feat(components): accordion icon animation

nuxt.config.ts

@@ -5,6 +5,7 @@ const SRC = resolve(__dirname, 'src');
 
 export default defineNuxtConfig({
   srcDir: SRC,
+  ssr: false,
   app: {
     head: {
       title: 'Canvas 3D',

src/assets/styles/_animations.scss

@@ -1,12 +1 @@
-.slide-leave-active,
-.slide-enter-active {
-  transition: 1s;
-}
 
-.slide-enter {
-  transform: translate(100%, 0);
-}
-
-.slide-leave-to {
-  transform: translate(-100%, 0);
-}

src/components/accordion.vue

@@ -8,8 +8,7 @@ const showForm = ref<boolean>(false);
     <div class="header" @click="showForm = !showForm">
       <h2>{{ title }}</h2>
       <button class="button">
-        <IconClose v-if="showForm"/>
+        <IconOpen class="icon" :class="{icon_close: showForm}"/>
-        <IconOpen v-else/>
       </button>
     </div>
     <div class="content" v-show="showForm">
@@ -35,6 +34,14 @@ const showForm = ref<boolean>(false);
   padding: 8px 0;
 }
 
+.icon {
+  transition: transform 0.2s;
+
+  &_close {
+    transform: rotate(180deg);
+  }
+}
+
 .button {
   color: var(--icon-color);
 }

src/pages/figure.vue

@@ -26,7 +26,7 @@ const activeProjection = ref<number>(0);
     </Accordion>
     <Accordion title="Проекции">
       <GridContainer>
-        <GridElement v-for="(projection, i) in projections" :is-active="activeProjection === i" :key="projection"
+        <GridElement v-for="(projection, i) in projections" :key="projection" :is-active="activeProjection === i"
                      :title="projection" @click="activeProjection = i"/>
       </GridContainer>
     </Accordion>