Fancy animation zur image section wenn generate butten gepresst wurde.

KIKunstKirstenKlöckner/Pages/AiArt.razor

@@ -8,6 +8,7 @@
 @using KIKunstKirstenKlöckner.Data
 @using System.Diagnostics
 
+@inject IJSRuntime JSRuntime
 @inject IConfiguration Config
 @inject TooltipService TooltipService
 @inject NotificationService NotificationService
@@ -64,8 +65,12 @@
             </ChildContent>
         </RadzenPanel>
 
-        <RadzenButton Visible=@_buttonVisible Click=@(async ()=> await GenerateImagesAsync())>Generate</RadzenButton>
+            <RadzenButton Visible=@_buttonVisible Click="@OnGenerateButtonClickAsync">Generate</RadzenButton>
 
+        @if (_imageSectionVisible)
+            {
+                <section id="imageSection">
+                            <RadzenStack Orientation="Orientation.Vertical" AlignItems="AlignItems.Center">
                         <RadzenText TextStyle="TextStyle.H4">Die Idee, die gemalt wird:</RadzenText>
 
                         <RadzenCard class="rz-mt-4" Style="width: 800px;">
@@ -125,6 +130,9 @@
                                 </RadzenColumn>
                             </RadzenRow>
                         </RadzenCard>
+                    </RadzenStack>
+                </section>
+            }
     
     </RadzenStack>
 </div>
@@ -142,6 +150,7 @@
     private bool _buttonVisible = true;
     private bool _addonsVisible = false;
     private bool _bothVisible = false;
+    private bool _imageSectionVisible = false;
 
     public string BusyMessage { get; set; } = "Initial Message";
 
@@ -156,6 +165,15 @@
         FadeIn
     }
 
+    private async Task OnGenerateButtonClickAsync()
+    {
+        _imageSectionVisible = true;
+        StateHasChanged();
+        await Task.Delay(100);
+        await JSRuntime.InvokeVoidAsync("scrollToElement", "imageSection");
+        await GenerateImagesAsync();
+    }
+
     async Task ShowImageDialog(string imageUrl)
     {
         var result = await DialogService.OpenAsync("", ds =>

KIKunstKirstenKlöckner/wwwroot/js/animator.js

@@ -14,6 +14,12 @@
 
     window.addEventListener('scroll', animateElements);
 
-    // Initialer Aufruf für den Fall, dass Elemente bereits sichtbar sind
     animateElements();
 }
+
+function scrollToElement(elementId) {
+    var element = document.getElementById(elementId);
+    if (element) {
+        element.scrollIntoView({ behavior: 'smooth' });
+    }
+}