Generiere vier Fotos, große Ansicht und Flippy Floppy

2023-08-05 00:43:11 +02:00
parent 29329215e7
commit 27aa1cead7
4 changed files with 343 additions and 27 deletions
--- a/KIKunstKirstenKlöckner/Pages/FlippingImage.razor
+++ b/KIKunstKirstenKlöckner/Pages/FlippingImage.razor
@ -0,0 +1,162 @@
+<style>
+    .flip-card {
+        background-color: transparent;
+        width: 12em;
+        height: 12em;
+        perspective: 30em;
+        transition: transform 0.2s;
+        z-index: auto;
+    }
+    
+    .flip-card:hover {
+        transform: scale(1.1, 1.1);
+        z-index: 100;
+    }
+
+    .flip-card-inner {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        transform-style: preserve-3d;
+    }
+
+    .flip-card_up .flip-card-inner {
+        transition: transform 0.6s var(--delay);
+        transform: rotateX(180deg);
+    }
+
+    .flip-card_down .flip-card-inner {
+        transition: transform 0.6s var(--delay);
+        transform: rotateX(-180deg);
+    }
+
+    .flip-card_left .flip-card-inner {
+        transition: transform 0.6s var(--delay);
+        transform: rotateY(-180deg);
+    }
+
+    .flip-card_right .flip-card-inner {
+        transition: transform 0.6s var(--delay);
+        transform: rotateY(180deg);
+    }
+
+    .fade-out-flipped-5 {
+        animation: fadeOut 5s;
+        animation-fill-mode: forwards;
+        transform: rotateY(180deg);
+    }
+    
+    .flip-card-front, .flip-card-back_up, .flip-card-back_down, .flip-card-back_left, .flip-card-back_right {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        /* Rückseite beider Karten-Seiten verstecken wird nicht angezeigt */
+        -webkit-backface-visibility: hidden;
+        backface-visibility: hidden;
+        box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
+    }
+    /* Rückseite der Karte ist 180 Grad gedreht */
+    .flip-card-front {
+        /*box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);*/
+    }
+    
+    .flip-card-back_up {
+        transform: rotateX(-180deg);
+    }
+
+    .flip-card-back_down {
+        transform: rotateX(180deg);
+    }
+
+    .flip-card-back_left {
+        transform: rotateY(180deg);
+    }
+
+    .flip-card-back_right {
+        transform: rotateY(-180deg);
+    }
+    
+    .flip-card-content {
+        position: absolute;
+        top: 0;
+        left: 0;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+    
+</style>
+
+<div class="flip-card @(Show ? "" : _flipperClassName)">
+    <div class="flip-card-inner" style="--delay: @(FlipDelay)ms;">
+        <div class="@(Show ? "fade-out-5 flip-card-front" : _backClassName)" style="@(HideImage ? "opacity: 0;": "opacity: 1;")">
+            <div class="d-flex justify-content-center align-items-center flip-card-content">
+                <div class="d-flex justify-content-center align-items-center">
+                    <RadzenProgressBarCircular ProgressBarStyle="ProgressBarStyle.Primary" ShowValue="false" Mode="ProgressBarMode.Indeterminate"
+                                               Style="width:12em;height:12em; " />
+                </div>
+            </div>
+        </div>
+        <div class="flip-card-front" style="@(HideImage ? "opacity: 0;": "opacity: 1;")">
+            <RadzenImage Path="@ImageUrl" Style="width:12em;height:12em;" Click="@Click" class="@(Show ? "fade-in-5" : "")" />
+        </div>
+    </div>
+</div>
+
+@code {
+    [Parameter]
+    public bool Show { get; set; }
+
+    [Parameter]
+    public bool HideImage { get; set; }
+
+    [Parameter]
+    public string ImageUrl { get; set; } = "images/robot_painting.jpg";
+
+    public enum FlipDirection
+    {
+        Up,
+        Down,
+        Left,
+        Right
+    }
+
+    private string _flipperClassName;
+    private string _backClassName;
+    private FlipDirection _flipTo;
+
+    [Parameter]
+    public FlipDirection FlipTo
+    {
+        get => _flipTo;
+        set
+        {
+            _flipTo = value;
+            _flipperClassName = _flipTo switch
+            {
+                FlipDirection.Up => "flip-card_up",
+                FlipDirection.Down => "flip-card_down",
+                FlipDirection.Left => "flip-card_left",
+                FlipDirection.Right => "flip-card_right",
+                _ => throw new ArgumentOutOfRangeException()};
+            _backClassName = _flipTo switch
+            {
+                FlipDirection.Up => "flip-card-back_up",
+                FlipDirection.Down => "flip-card-back_down",
+                FlipDirection.Left => "flip-card-back_left",
+                FlipDirection.Right => "flip-card-back_right",
+                _ => throw new ArgumentOutOfRangeException()};
+        }
+    }
+
+    [Parameter]
+    public double FlipDelay { get; set; } = 0.0;
+
+    /// <summary>Gets or sets the click callback.</summary>
+    /// <value>The click callback.</value>
+    [Parameter]
+    public EventCallback<MouseEventArgs> Click { get; set; }
+}