fix: use decamelize for toCSS

daybrush · Dec 10, 2022 · a78f562 · a78f562
1 parent 5c0f173
commit a78f562
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -12,7 +12,6 @@
 <p align="middle">🎬 Scene.js is an JavaScript & CSS timeline-based animation library.</p>
 
 <p align="middle"><a href="https://daybrush.com/scenejs"><strong>Official Site</strong></a> &nbsp;/&nbsp; <a href="https://daybrush.com/scenejs/release/latest/doc"><strong>API</strong></a> &nbsp;/&nbsp; <a href="https://daybrush.com/scenejs/features.html"><strong>Features</strong></a> &nbsp;/&nbsp; <a href="https://codepen.io/collection/DLWxrd/"><strong>Examples</strong></a></p>
-<p align="middle"><strong>Translations</strong>: <a href="https://github.com/daybrush/scenejs/blob/master/README.md">🇺🇸</a> <a href="https://github.com/daybrush/scenejs/blob/master/README_CN.md">🇨🇳</a></p>
 <br/>
 <p align="middle" style="max-width: 1000px; margin: 0px auto;" >
   <a href="https://codepen.io/daybrush/pen/arQpYb" target="_blank"><img src="https://daybrush.com/scenejs/images/daybrush.gif" width="280" style="min-width:200px;max-width:320px;width: 32%;"/></a>&nbsp;
@@ -43,7 +42,6 @@
 [**More Examples**](https://codepen.io/collection/DLWxrd/)
 
 
-
 ## ⚙️ Installation
 ```bash
 $ npm install scenejs
@@ -123,25 +121,35 @@ const scene = new Scene({
 ## ⭐️ Show Your Support
 Please give a ⭐️ if this project helped you!
 
-## 👏 Contributing
-
-If you have any questions or requests or want to contribute to `scenejs` or other packages, please write the issue or give me a Pull Request freely.
-
-## 🐞 Bug Report
 
-If you find a bug, please report to us opening a new [Issues](https://github.com/daybrush/scenejs/issues) on GitHub.
+## 👏 Contributing
 
+If you have any questions or requests or want to contribute to `scenejs` or other packages, please write the [issue](https://github.com/daybrush/scenejs/issues) or give me a Pull Request freely.
 
-## Contributors
 
 ### Code Contributors
 
 This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+
 <a href="https://github.com/daybrush/scenejs/graphs/contributors">
   <img src="https://contrib.rocks/image?repo=daybrush/scenejs" />
 </a>
 
 
+## Sponsors
+<p align="center">
+	<a href="https://daybrush.com/sponsors/sponsors.svg">
+		<img src="https://daybrush.com/sponsors/sponsors.svg"/>
+	</a>
+</p>
+
+
+## 🐞 Bug Report
+
+If you find a bug, please report to us opening a new [Issue](https://github.com/daybrush/scenejs/issues) on GitHub.
+
+
+
 ## 📝 License
 
 This project is [MIT](https://github.com/daybrush/scenejs/blob/master/LICENSE) licensed.

diff --git a/packages/scenejs/README.md b/packages/scenejs/README.md
@@ -12,7 +12,6 @@
 <p align="middle">🎬 Scene.js is an JavaScript & CSS timeline-based animation library.</p>
 
 <p align="middle"><a href="https://daybrush.com/scenejs"><strong>Official Site</strong></a> &nbsp;/&nbsp; <a href="https://daybrush.com/scenejs/release/latest/doc"><strong>API</strong></a> &nbsp;/&nbsp; <a href="https://daybrush.com/scenejs/features.html"><strong>Features</strong></a> &nbsp;/&nbsp; <a href="https://codepen.io/collection/DLWxrd/"><strong>Examples</strong></a></p>
-<p align="middle"><strong>Translations</strong>: <a href="https://github.com/daybrush/scenejs/blob/master/README.md">🇺🇸</a> <a href="https://github.com/daybrush/scenejs/blob/master/README_CN.md">🇨🇳</a></p>
 <br/>
 <p align="middle" style="max-width: 1000px; margin: 0px auto;" >
   <a href="https://codepen.io/daybrush/pen/arQpYb" target="_blank"><img src="https://daybrush.com/scenejs/images/daybrush.gif" width="280" style="min-width:200px;max-width:320px;width: 32%;"/></a>&nbsp;

diff --git a/packages/scenejs/src/Frame.ts b/packages/scenejs/src/Frame.ts
@@ -7,6 +7,7 @@ import {
     isObject, isArray, isString, getKeys,
     ANIMATION, TRANSFORM, FILTER, PROPERTY, FUNCTION, ARRAY, OBJECT, IObject, isUndefined,
     sortOrders,
+    decamelize,
 } from "@daybrush/utils";
 import { NameType, KeyValueChildren } from "./types";
 import OrderMap from "order-map";
@@ -390,7 +391,7 @@ class Frame {
 
         sortOrders(keys, this.orderMap.get([]));
         keys.forEach(name => {
-            cssArray.push(`${name}:${cssObject[name]};`);
+            cssArray.push(`${decamelize(name, "-")}:${cssObject[name]};`);
         });
         return cssArray.join("");
     }

diff --git a/packages/scenejs/test/unit/SceneItem.spec.ts b/packages/scenejs/test/unit/SceneItem.spec.ts
@@ -905,6 +905,12 @@ describe("SceneItem Test", () => {
             expect(item!.get("2>", "a")).to.be.equals(4);
             expect(item!.get(3, "a")).to.be.equals(6);
         });
+        it(`should check 'append' method 2`, () => {
+            item.set(10);
+
+            // Then
+            expect(item!.getDuration()).to.be.equals(10);
+        });
         it(`should check 'prepend' method`, () => {
             item!.prepend(new SceneItem({
                 0: {