Add transition to solutions

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();
       });

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">
+    <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>