Refactor Enter to pure CSS web component

components/composition/Enter/Enter.css

@@ -33,22 +33,38 @@
 }
 
 dmd-enter {
-  animation-duration: var(--dmd-transition-duration-enter);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-  animation-name: var(--dmd-transition-enter-animation);
-  animation-timing-function: var(--dmd-transition-timing-enter);
   display: block;
   opacity: 0;
 
-  &[delay] {
-    animation-delay: var(--dmd-transition-enter-delay);
+  &[type='fade'] {
+    animation-name: fade;
+  }
+
+  &[type='fade-in-up'] {
+    animation-name: fade-in-up;
   }
 
   &[type='boing'] {
+    animation-name: boing;
     animation-timing-function: var(--dmd-transition-timing-boing);
   }
 
+  &[type] {
+    animation-duration: var(--dmd-transition-duration-enter);
+    animation-fill-mode: forwards;
+    animation-iteration-count: 1;
+    animation-timing-function: var(--dmd-transition-timing-enter);
+  }
+
+  &[delay] {
+    animation-delay: attr(delay s, 0s);
+  }
+
+  &[enter-on-scroll]:not([enter-on-scroll='false']) {
+    animation-range: entry 0% entry 25%;
+    animation-timeline: view();
+  }
+
   &[fill] {
     display: grid;
   }

components/composition/Enter/Enter.stories.ts

@@ -1,8 +1,6 @@
 import { StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 
-import './Enter';
-
 export default {
   component: 'dmd-enter',
   argTypes: {
@@ -49,8 +47,9 @@ export const OnScroll: StoryObj = {
       enter-on-scroll="${args.enterOnScroll}"
       delay="${args.delay}"
     >
-      <div style="background-color: #eee; height: 400px;"></div>
+      <div style="background-color: #eee; height: 100px;"></div>
     </dmd-enter>
+    <div style="height: 120vh;">Scroll down</div>
   `,
 };
 

components/composition/Enter/Enter.ts

@@ -1,6 +1,3 @@
-import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-
 import { JSXCustomElement } from '../../../types/jsx-custom-element';
 
 export interface EnterAttributes {
@@ -13,54 +10,6 @@ export interface EnterAttributes {
   fill?: string | boolean;
 }
 
-@customElement('dmd-enter')
-export class Enter extends LitElement {
-  observer?: IntersectionObserver;
-  @state() inView: boolean = false;
-  @property({ reflect: true }) type?: 'fade' | 'fade-in-up' | 'boing';
-  @property({ reflect: true, attribute: 'enter-on-scroll' })
-  enterOnScroll?: string | boolean;
-  @property({ reflect: true }) delay?: string | number;
-  @property({ reflect: true }) fill?: string | boolean;
-
-  connectedCallback(): void {
-    super.connectedCallback();
-    if (this.enterOnScroll) {
-      this.observer = new IntersectionObserver(
-        (entries) => {
-          entries.forEach((entry) => {
-            if (entry.isIntersecting) {
-              this.inView = true;
-              this.observer?.unobserve(this);
-            }
-          });
-        },
-        { threshold: 0 },
-      );
-      this.observer.observe(this);
-    }
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this.observer?.disconnect();
-  }
-
-  render() {
-    const type = this.inView || !this.enterOnScroll ? this.type : '';
-
-    return html`
-      <style>
-        :host {
-          --dmd-transition-enter-delay: ${this.delay}s;
-          --dmd-transition-enter-animation: ${type};
-        }
-      </style>
-      <slot></slot>
-    `;
-  }
-}
-
 declare global {
   interface HTMLElementTagNameMap {
     'dmd-enter': EnterAttributes;

stylelint.config.cjs

@@ -19,5 +19,11 @@ module.exports = {
         ignoreAtRules: ['starting-style'],
       },
     ],
+    'property-no-unknown': [
+      true,
+      {
+        ignoreProperties: ['animation-timeline', 'animation-range'],
+      },
+    ],
   },
 };