ng-transition
Transition elements via classes like you would in the Vue and Alpine.js libraries.
Click here for a demo app, via Heroku. You can also find the code of this demo in the apps/ng-transition-demo
folder of this repository.
Install
Download ng-transition
into your Angular project via NPM or Yarn:
# NPM npm install ng-transition # Yarn yarn add ng-transition
Basic Use
Similar to the modal example found in this repository's demo app, an example modal in your code may look something like the below snippet.
The below is a mixture of custom classes and TailwindCSS utilities. Your transition classes can be totally customized in your CSS or SCSS files, or they can be utility functions like our example.
<!-- We want the entire container to wait to hide before leaving, --><!-- therefore we will specify a `ngTransitionLeave` value that is --><!-- also tied to the `openedModal` value. --> ...
Angular Universal
Depending on the Alpine.js source directly resulted in errors when rendering Angular server-side. Find the example server module in the apps/ng-transition-demo/src/app
folder to see how we replace problematic browser APIs with server-side friendly implementations via the ng-refs
package.
If you see the below error when rendering Angular server-side, find our Dependency Injection solution in the aforementioned folder.