From 07785ae2c1a76c5aa7bd93b0f16e9ea06194aca4 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <donramonloco+github@gmail.com>
Date: Mon, 4 Feb 2019 18:54:55 +0100
Subject: [PATCH] Add transition to solutions

---
 client/cypress/integration/solutions.spec.js  |  4 +++-
 .../components/content-blocks/Solution.vue    | 19 ++++++++++++++++---
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/client/cypress/integration/solutions.spec.js b/client/cypress/integration/solutions.spec.js
index 04cec8d4..9f16c6a3 100644
--- a/client/cypress/integration/solutions.spec.js
+++ b/client/cypress/integration/solutions.spec.js
@@ -5,7 +5,9 @@ describe('Solutions', () => {
 
     cy.visit('/module/lohn-und-budget');
     cy.get('[data-cy=solution]').first()
-      .should('contain', 'anzeigen').then($solution => {
+      .should('contain', 'anzeigen')
+      .should('not.contain', 'Lösungssatz')
+      .then($solution => {
       cy.wrap($solution).within(() => {
         cy.get('[data-cy=show-solution]').click();
       });
diff --git a/client/src/components/content-blocks/Solution.vue b/client/src/components/content-blocks/Solution.vue
index d1281dce..a81a04d7 100644
--- a/client/src/components/content-blocks/Solution.vue
+++ b/client/src/components/content-blocks/Solution.vue
@@ -4,9 +4,11 @@
       <template v-if="!visible">anzeigen</template>
       <template v-else>ausblenden</template>
     </a>
-    <p class="solution__text" data-cy="solution-text" v-if="visible">
-      {{value.text}}
-    </p>
+    <transition name="fade">
+      <p class="solution__text fade" data-cy="solution-text" v-if="visible">
+        {{value.text}}
+      </p>
+    </transition>
   </div>
 </template>
 
@@ -44,6 +46,7 @@
       /*margin-bottom: 15px;*/
       display: block;
       cursor: pointer;
+      font-weight: 400;
     }
 
     &__text {
@@ -51,4 +54,14 @@
       color: $color-grey;
     }
   }
+
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: opacity .3s;
+  }
+
+  .fade-enter,
+  .fade-leave-active {
+    opacity: 0;
+  }
 </style>