https://github.com/ciriousjoker/ngx-transition-content

Switch between content: Fade out, transition height, fade in.
https://github.com/ciriousjoker/ngx-transition-content

Last synced: over 1 year ago
JSON representation

Switch between content: Fade out, transition height, fade in.

Host: GitHub
URL: https://github.com/ciriousjoker/ngx-transition-content
Owner: ciriousjoker
License: mit
Created: 2022-03-11T00:06:28.000Z (over 4 years ago)
Default Branch: main
Last Pushed: 2023-11-11T20:46:49.000Z (over 2 years ago)
Last Synced: 2025-03-02T23:35:11.991Z (over 1 year ago)
Language: TypeScript
Size: 4.19 MB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 1
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

awesome-angular - ngx-transition-content - An Angular library to seamlessly transition dialog content by fading out old content, animating to new dimensions, and fading in new content. (Third Party Components / Animations)
fucking-awesome-angular - ngx-transition-content - An Angular library to seamlessly transition dialog content by fading out old content, animating to new dimensions, and fading in new content. (Third Party Components / Animations)

README

# NgxTransitionContent _{[(changelog)](CHANGELOG.md)}

[![npm](https://img.shields.io/npm/l/ngx-transition-content.svg)](https://github.com/ciriousjoker/ngx-transition-content/blob/main/LICENSE)

Transition content: Fade out, transition dimensions, fade in.

It was built for dialog content where the dialog width stays the same for every page of content.
Read the caveats before using it.

## Transition

> Fade out old content -> transition dimensions to fit the new content -> fade in new content

### Demo

https://user-images.githubusercontent.com/16866223/158490182-56702fef-d034-44f3-a71b-e5ad5bef87d7.mov

## Usage:

```html

Content1

Content2

```