From 2d891c76cd438e64c9823a39533c3a70df167442 Mon Sep 17 00:00:00 2001
From: robonen <robonenandrew@gmail.com>
Date: Mon, 21 Nov 2022 05:40:46 +0700
Subject: [PATCH] feat(components): accordion icon animation

---
 nuxt.config.ts                     |  1 +
 src/assets/styles/_animations.scss | 11 -----------
 src/components/accordion.vue       | 11 +++++++++--
 src/pages/figure.vue               |  2 +-
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/nuxt.config.ts b/nuxt.config.ts
index 564f839..6352cce 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -5,6 +5,7 @@ const SRC = resolve(__dirname, 'src');
 
 export default defineNuxtConfig({
   srcDir: SRC,
+  ssr: false,
   app: {
     head: {
       title: 'Canvas 3D',
diff --git a/src/assets/styles/_animations.scss b/src/assets/styles/_animations.scss
index 3df0290..8b13789 100644
--- a/src/assets/styles/_animations.scss
+++ b/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);
-}
diff --git a/src/components/accordion.vue b/src/components/accordion.vue
index 272eaaa..5e67388 100644
--- a/src/components/accordion.vue
+++ b/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 v-else/>
+        <IconOpen class="icon" :class="{icon_close: showForm}"/>
       </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);
 }
diff --git a/src/pages/figure.vue b/src/pages/figure.vue
index 45686b0..b53c647 100644
--- a/src/pages/figure.vue
+++ b/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>