qwik-transition

Lightweight (<1kb gzip) and easy-to-use custom Qwik hook for adding smooth animations and effects to your Qwik components. This hook is based on @iamyoki/transition-hook.

View demo in StackBlitz | View example source code

Installation

npm install qwik-transition

Usage

useCSSTransition

This hook transforms a boolean state into a transition stage, which allows you to control your CSS transitions.

import { component$, useSignal } from "@builder.io/qwik";
import { useCSSTransition } from "qwik-transition";

export default component$(() => {
  const onOff = useSignal(true);
  const { stage, shouldMount } = useCSSTransition(onOff, { timeout: 300 });

  return (
    <div>
      <button
        onClick$={() => {
          onOff.value = !onOff.value;
        }}
      >
        toggle
      </button>
      {shouldMount.value && (
        <p
          style={{
            transition: ".3s",
            opacity: stage.value === "enterTo" ? 1 : 0,
          }}
        >
          Hey guys, I'm fading
        </p>
      )}
    </div>
  );
});

API Reference

useCSSTransition(signal, { timeout, transitionOnAppear })

const { stage, shouldMount } = useCSSTransition(onOff, {
  timeout: 300,
  transitionOnAppear: true,
});

Parameters:

• signal: Signal<boolean>: Required. Your boolean signal, which controls animation in and out.
• options: { timeout: number = 0; transitionOnAppear: boolean = false; }:
  • timeout: How long before the transition ends and the component unmounts.
  • transitionOnAppear: Whether to set the enterFrom stage value on the initial mount of the page or not.

Returns:

• stage: Signal<"enterFrom" | "enterTo" | "leaveFrom" | "leaveTo" | "idle">: Current stage of the transition.
  • idle: No transition.
  • enterFrom: The element will enter. The transition begins. Use this value to set the starting values of your enter transition.
  • enterTo: Added in the next tick after enterFrom. Use this value to set the ending values of your enter transition.
  • leaveFrom: The element will disappear. The transition beings. Use this value to set the starting values of your exit transition.
  • leaveTo: Added in the next tick after leaveFrom. Use this value to set the ending values of your exit transition.
• shouldMount: Signal<boolean>: Whether the component should be mounted or not. The timeout you specify as one of the options is important here to time when shouldMount changes from true to false.

Acknowledgments

This hook is adapted from https://github.com/iamyoki/transition-hook. Many thanks to the original author!

License

MIT