Merge pull request #110 from IBCornelsen/Jens

Widget

src/components/Widget2.svelte

@@ -2,7 +2,7 @@
 <script lang="ts">
 
 import BannerPrice from "#content/banner-saeule.svelte";
-
+import { fade } from 'svelte/transition';
 
   let selectedType: string = "";
   let selectedReason: string = "";
@@ -85,15 +85,15 @@ import BannerPrice from "#content/banner-saeule.svelte";
         </div>
        </div> 
     
-        {#if showResult}
-        <div class="OEA_item6 result">
-          <div id="OEA_result">
+      {#if showResult}
+      <div class="OEA_item6 result" transition:fade={{ duration: 1000 }}>
+        <div id="OEA_result" class="bg-white p-4 shadow-md rounded">
             <BannerPrice client:load />
-          </div>
         </div>
-      {/if}
+      </div>
+    {/if}
+
 
-      
     </div>
     </div>
     
@@ -145,5 +145,13 @@ import BannerPrice from "#content/banner-saeule.svelte";
         @apply text-blue-600 underline hover:text-blue-800 font-semibold;
       }
 
+      .result {
+    @apply opacity-0 transition-opacity duration-1000 ease-in-out;
+  }
+
+  .result[style*="opacity: 1"] {
+    @apply opacity-100;
+  }
+
     </style>