timmy ha revisionato questo gist 10 months ago. Vai alla revisione
Nessuna modifica
timmy ha revisionato questo gist 10 months ago. Vai alla revisione
Nessuna modifica
timmy ha revisionato questo gist 1 year ago. Vai alla revisione
1 file changed, 45 insertions
lit_with_animate_css.html(file creato)
| @@ -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> | |
Più nuovi
Più vecchi