refactor: remove waapi support

Author: c4benni

README.md

@@ -71,7 +71,7 @@ I'm a big fan of smooth transitioning with a natural feel for DOM nodes. This li
 <br>
 To be honest, [`raf`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) won't achive that kind of performance, even when animating composite properties (transform, opacity). If you need to make a bulky request, be ready for some janky animations.
 <br>
-This is where `<UiTransition />` comes in 👨‍🏫. `<UiTransition />` uses the [`WAAPI`](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API) if it is available, and falls back to using `CSS Keyframes`. Keyframes uses [off main thread animation](https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance#off_main_thread_animation) so you can be sure to do CPU draining tasks with your DOM node on the main thread, without having it interupted with calculations on every frame to create _spring animations_, ensuring a butter smooth animation with a natural feel.
+This is where `<UiTransition />` comes in 👨‍🏫. `<UiTransition />` uses `CSS Keyframes` which utilizes [off main thread animation](https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance#off_main_thread_animation) so you can be sure to do CPU draining tasks with your DOM node on the main thread, without having it interupted with calculations on every frame to create _spring animations_, ensuring a butter smooth animation with a natural feel.
 
 ## Props
 

src/index.vue

@@ -30,7 +30,7 @@ export default defineComponent({
 
   props,
 
-  setup(_props, { slots, emit }) {
+  setup(_props, { slots }) {
     const animPhase = ref<AnimPhase>("enter");
 
     const props = computed(() => _props);
@@ -98,7 +98,6 @@ export default defineComponent({
             animPhase,
             appear: props.value.appear,
             configProp: getConfig,
-            emit,
             getKeyframeName,
             getDuration,
             getDelay,

src/setup/hooks/beforeMount.ts

@@ -35,13 +35,7 @@ export default function beforeMount() {
   if (!globalState.init) {
     globalState.init = true;
 
-    // set globalState.waapi
-    globalState.waapi = typeof HTMLElement.prototype.animate === "function";
-
-    // or create a style tag.
-    if (!globalState.waapi) {
-      globalState.styleId = createStyleTag();
-    }
+    globalState.styleId = createStyleTag();
 
     // create worker
     if (!globalState.webWorker) {

src/state/index.ts

@@ -2,7 +2,6 @@ import { GlobalState } from "./types";
 
 export const globalState: GlobalState = {
   init: false,
-  waapi: false,
   webWorker: null,
   styleId: "",
   styleCreated: false,

src/state/transitions.ts

@@ -8,11 +8,12 @@ let transitions = {
       frame: (step, phase) => {
         const build = {
           enter: {
-            opacity: `${step(0, to)}`,
-            transform: `scale3d(${step(from, to)}, ${step(from, to)}, 1)`,
+            opacity: `${step(from, to)}`,
+            willChange: "opacity",
           },
           leave: {
             opacity: `${step(to, from)}`,
+            willChange: "opacity",
           },
         };
 

src/state/types.ts

@@ -4,9 +4,8 @@ export interface GlobalState {
   styleId: string;
   styleCreated: boolean;
   webWorker: null | Worker;
-  waapi: boolean;
   init: boolean;
-  keyframes: DynamicObject<number>;
+  keyframes: DynamicObject<number | string>;
 }
 
 export type ConstructAnim = (...args: any[]) => BuildAnim;

src/types/index.ts

@@ -34,14 +34,12 @@ export interface Anim {
 }
 
 export interface BuildAnim extends Anim {
-  enter?: Anim;
-  leave?: Anim;
+  enter?: Anim | boolean;
+  leave?: Anim | boolean;
 }
 
 export type ConfigProp = BuildAnim | string | boolean;
 
-export type Emit = (event: string, ...args: any[]) => void;
-
 export interface InstallOptions {
   componentName?: string;
   globals?: (string | DynamicObject<string>)[];

src/utils/eventHooks/animCancelled/index.ts

@@ -1,14 +1,7 @@
 import { RendererElement } from "vue";
-import { Emit } from "../../../types";
 import { Hook } from "../types";
-import { $emit, resetEl } from "../utils";
-
-export default function animcancelled(
-  el: RendererElement,
-  hook: Hook,
-  emit: Emit
-) {
-  $emit(emit, `${hook}Cancelled`, [el]);
+import { resetEl } from "../utils";
 
+export default function animcancelled(el: RendererElement, hook: Hook) {
   resetEl(el);
 }

src/utils/eventHooks/animDone/index.ts

@@ -1,18 +1,11 @@
-import { capitalize, ComputedRef, Ref, RendererElement } from "vue";
-import { AnimPhase, BuildAnim, Emit } from "../../../types";
+import { ComputedRef, Ref, RendererElement } from "vue";
+import { AnimPhase, BuildAnim } from "../../../types";
 import { Hook, UiTransitionElement } from "../types";
-import {
-  $emit,
-  getState,
-  resetEl,
-  setAnimState,
-  setProperties,
-} from "../utils";
+import { getState, resetEl, setAnimState, setProperties } from "../utils";
 
 export default function animDone(
   e: RendererElement,
   hook: Hook,
-  emit: Emit,
   animPhase: Ref<AnimPhase>,
   configProp: ComputedRef<BuildAnim | null>,
   retainFinalStyle: boolean
@@ -21,11 +14,9 @@ export default function animDone(
 
   setAnimState(state, animPhase);
 
-  $emit(emit, `after${capitalize(hook)}`, [e]);
-
   resetEl(e);
 
-  if (retainFinalStyle && configProp.value) {
+  if (retainFinalStyle && configProp.value && animPhase.value === "enter") {
     const el = e as unknown as UiTransitionElement;
 
     const lastFrame = configProp.value.frame(

src/utils/eventHooks/animStart/index.ts

@@ -1,29 +1,19 @@
 import { ComputedRef, Ref, RendererElement } from "vue";
-import { AnimPhase, BuildAnim, Emit } from "../../../types";
-import sleep from "../../../worker/sleep";
+import { AnimPhase, BuildAnim } from "../../../types";
 import { Hook, UiTransitionElement } from "../types";
-import { $emit, getState, setAnimState, setProperties } from "../utils";
-
-import { globalState } from "../../../state";
+import { getState, setAnimState } from "../utils";
 
 export default function animStart(
   e: RendererElement,
   done: (cancelled?: boolean) => void,
   hook: Hook,
-  emit: Emit,
   animPhase: Ref<AnimPhase>,
-  configProp: ComputedRef<BuildAnim | null>,
-  getKeyframeName: ComputedRef<string>,
-  getDuration: ComputedRef<string>
+  configProp: ComputedRef<BuildAnim | null>
 ) {
-  const { keyframes, waapi } = globalState;
-
   const state = getState(hook);
 
   setAnimState(state, animPhase);
 
-  $emit(emit, hook, [e]);
-
   if (!configProp.value) {
     return done();
   }
@@ -35,32 +25,4 @@ export default function animStart(
 
     delete el.__done;
   };
-
-  if (!waapi) {
-    sleep().then(() => {
-      const duration = () => {
-        // check dataset
-        if (el.dataset.uitDuration) {
-          return parseFloat(el.dataset.uitDuration);
-        }
-
-        // check the prop value
-        if (typeof getDuration.value === "string" && !!getDuration.value) {
-          return getDuration.value;
-        }
-
-        // check duration in config object
-        if (/string|number/.test(typeof configProp.value?.duration)) {
-          return parseFloat(`${configProp.value?.duration}`) || 1;
-        }
-
-        return keyframes[getKeyframeName.value];
-      };
-
-      setProperties(el, {
-        "--uit-anim-duration": `${duration()}ms`,
-        "--uit-anim-name": getKeyframeName.value,
-      });
-    });
-  }
 }