timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 10 months ago. Zu Änderung gehen
Keine Änderungen
timmy hat die Gist bearbeitet 1 year ago. Zu Änderung gehen
1 file changed, 45 insertions
lit_with_animate_css.html(Datei erstellt)
| @@ -0,0 +1,45 @@ | |||
| 1 | + | <!DOCTYPE html> | |
| 2 | + | <html lang="en"> | |
| 3 | + | <head> | |
| 4 | + | <meta charset="UTF-8"> | |
| 5 | + | <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| 6 | + | <title>Lit with Animate.css</title> | |
| 7 | + | <!-- 引入 Animate.css --> | |
| 8 | + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"> | |
| 9 | + | <!-- 引入 Lit --> | |
| 10 | + | <script type="module" src="https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm"></script> | |
| 11 | + | </head> | |
| 12 | + | <body> | |
| 13 | + | <!-- 自訂元件 --> | |
| 14 | + | <my-component></my-component> | |
| 15 | + | ||
| 16 | + | <script type="module"> | |
| 17 | + | import { LitElement, html, css } from 'https://cdn.jsdelivr.net/npm/lit@2.8.0/+esm'; | |
| 18 | + | ||
| 19 | + | class MyComponent extends LitElement { | |
| 20 | + | // 禁用 Shadow DOM | |
| 21 | + | createRenderRoot() { | |
| 22 | + | return this; // 將元件渲染在 Light DOM 中 | |
| 23 | + | } | |
| 24 | + | ||
| 25 | + | static styles = css` | |
| 26 | + | .animate__animated { | |
| 27 | + | font-size: 24px; | |
| 28 | + | text-align: center; | |
| 29 | + | margin-top: 100px; | |
| 30 | + | } | |
| 31 | + | `; | |
| 32 | + | ||
| 33 | + | render() { | |
| 34 | + | return html` | |
| 35 | + | <div class="animate__animated animate__bounce"> | |
| 36 | + | Hello, Animate.css with Lit! | |
| 37 | + | </div> | |
| 38 | + | `; | |
| 39 | + | } | |
| 40 | + | } | |
| 41 | + | ||
| 42 | + | customElements.define('my-component', MyComponent); | |
| 43 | + | </script> | |
| 44 | + | </body> | |
| 45 | + | </html> | |
Neuer
Älter