add new constructor to Keyframe (#12)

ant-design-blazor · Dec 13, 2023 · 9c778e8 · 9c778e8
1 parent f33f62f
commit 9c778e8
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 1 deletion.
diff --git a/src/Types/Keyframe.cs b/src/Types/Keyframe.cs
@@ -17,6 +17,12 @@ public Keyframe(string name)
             _name = name;
         }
 
+        public Keyframe(string name, CSSObject css)
+        {
+            _name = name;
+            _styles = css.GetStyles();
+        }
+
         public CSSObject this[string key]
         {
             get => _styles[key];
@@ -31,7 +37,7 @@ public override string ToString()
             {
                 sb.Append($"{subStyle.Key}{{{subStyle.Value.ParseStyle(true, string.Empty)}}}");
             }
-            sb.Append("}}");
+            sb.Append("}");
             return sb.ToString();
         }
     }

diff --git a/test/CssInCSharp.Tests/CSSObjectTests.cs b/test/CssInCSharp.Tests/CSSObjectTests.cs
@@ -59,5 +59,26 @@ public void Media()
             css.ToString().ShouldBe("@media (min-width: 500px){.grid-sm{display:none;inset-inline-start:auto;inset-inline-end:auto;margin-inline-start:0;order:0;}}");
             css.SerializeCss("1iw360o").ShouldBe("@media (min-width: 500px){:where(.1iw360o).grid-sm{display:none;inset-inline-start:auto;inset-inline-end:auto;margin-inline-start:0;order:0;}}");
         }
+
+        [Fact]
+        public void Animation()
+        {
+            var messageMoveIn = new Keyframe("MessageMoveIn", new CSSObject
+            {
+                ["0%"] = new CSSObject
+                {
+                    Padding = 0,
+                    Transform = "translateY(-100%)",
+                    Opacity = 0,
+                },
+                ["100%"] = new CSSObject
+                {
+                    Padding = 100,
+                    Transform = "translateY(0)",
+                    Opacity = 1,
+                }
+            });
+            messageMoveIn.ToString().ShouldBe("MessageMoveIn;@keyframes MessageMoveIn{0%{padding:0;transform:translateY(-100%);opacity:0;}100%{padding:100px;transform:translateY(0);opacity:1;}}");
+        }
     }
 }