https://github.com/voluntadpear/qwik-transition

Light-weight custom Qwik hook for adding smooth CSS transitions to your Qwik components.
https://github.com/voluntadpear/qwik-transition

css qwik transitions

Last synced: about 2 months ago
JSON representation

Light-weight custom Qwik hook for adding smooth CSS transitions to your Qwik components.

• Host: GitHub
• URL: https://github.com/voluntadpear/qwik-transition
• Owner: voluntadpear
• License: mit
• Created: 2023-02-26T00:38:20.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-05-08T01:09:36.000Z (over 1 year ago)
• Last Synced: 2024-07-08T16:12:26.778Z (3 months ago)
• Topics: css, qwik, transitions
• Language: TypeScript
• Homepage:
• Size: 427 KB
• Stars: 48
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


  


  

  


  




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

### useCSSTransition

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 (

    


       {

          onOff.value = !onOff.value;

        }}

      >

        toggle

      

      {shouldMount.value && (

        


          Hey guys, I'm fading

        

      )}

    

  );

});

```


## API Reference

### useCSSTransition(signal, { timeout, transitionOnAppear })

```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](https://choosealicense.com/licenses/mit/)