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

``bash npm install qwik-transition`

`Usage`

`$3`

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

`jsx 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 (


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

      )}


  );
});


API Reference
$3

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

Parameters: *signal: Signal: 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: 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

Usage

$3

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

jsx
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 (


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

      )}

);
});

API Reference

$3

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

Parameters:
*

signal: Signal

:  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: 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`.