https://github.com/vilicvane/unmount-animation-clone

A simple utility component that clones the DOM element for animation before it unmounts.
https://github.com/vilicvane/unmount-animation-clone

Last synced: 20 days ago
JSON representation

A simple utility component that clones the DOM element for animation before it unmounts.

• Host: GitHub
• URL: https://github.com/vilicvane/unmount-animation-clone
• Owner: vilicvane
• License: mit
• Created: 2021-10-07T16:08:26.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2023-04-03T13:10:22.000Z (over 1 year ago)
• Last Synced: 2024-11-30T15:42:03.285Z (23 days ago)
• Language: TypeScript
• Size: 101 KB
• Stars: 4
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# UnmountAnimationClone (React Component)

A simple utility component that clones the DOM element for animation before it unmounts.

## Installation

```ts

yarn add unmount-animation-clone

```

## Usage

[Live Demo](https://codesandbox.io/s/unmount-animation-clone-ich71)

**Style**

```css

@keyframes animation-enter {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}

@keyframes animation-leave {

  from {

    opacity: 1;

  }

  to {

    opacity: 0;

  }

}

.animated-element {

  animation-duration: 0.5s;

  animation-name: animation-enter;

}

.animated-element.unmount {

  /* Unmount animation is required. */

  animation-name: animation-leave;

}

```

**Render**

```jsx

import {useEffect, useState} from 'react';

import {UnmountAnimationClone} from 'unmount-animation-clone';

function App() {

  let [shown, setShown] = useState();

  useEffect(() => {

    let timer = setTimeout(() => setShown(!shown), 2000);

    return () => clearTimeout(timer);

  }, [shown]);

  return shown ? (

    

      
hello, world!

    

  ) : (

    <>>

  );

}

```


## API References

### `UnmountAnimationClone`

- `className` class name adds to the DOM element clone for unmount animation, defaults to `unmount`.

> `UnmountAnimationClone` requires one and only one React element as child. If the child is not a DOM element, make sure `forwardRef` is used to forward the ref to the outermost DOM element.

> `UnmountAnimationClone` relies on `animationend` event to remove the animated clone, so unmount animation is required.

## License

MIT License.