ngx-easy-view-transitions 3.1.1 → 3.2.0

package/README.md

@@ -18,22 +18,14 @@ Available on [npm](https://www.npmjs.org/package/ngx-easy-view-transitions/).
 npm install ngx-easy-view-transitions
 ```
 
-| Package version | Angular version |
-|-----------------|-----------------|
-| `3.x.x`         | `>=19.0.0`      |
-| `2.x.x`         | `>=18.0.0`      |
-| `1.x.x`         | `^17.3.0`       |
+Required Angular version: `>=19.0.0`
 
 You have to enable Angulars built-in view transitions in the Router using the [`withViewTransitions()`](https://angular.io/api/router/withViewTransitions#usage-notes) function.
 
 ```typescript
-bootstrapApplication(AppComponent,
-  {
-    providers: [
-      provideRouter(appRoutes, withViewTransitions())
-    ]
-  }
-);
+bootstrapApplication(AppComponent, {
+  providers: [provideRouter(appRoutes, withViewTransitions())]
+});
 ```
 
 ## Usage
@@ -43,7 +35,7 @@ bootstrapApplication(AppComponent,
 To morph an element during navigation from the old to the new state use the `transitionName` directive and provide the same name on both pages.
 
 ```typescript
-import { TransitionNameDirective } from 'ngx-easy-view-transitions';
+import {TransitionNameDirective} from 'ngx-easy-view-transitions';
 ```
 
 `users.component.html`
@@ -82,8 +74,8 @@ You can simply use a CSS [`@keyframes`](https://developer.mozilla.org/en-US/docs
 ```
 
 ```typescript
-inAnimation = { keyframeName: 'fadeIn', duration: 600 };
-outAnimation = { keyframeName: 'fadeIn', duration: 600, reverse: true };
+inAnimation = {keyframeName: 'fadeIn', duration: 600};
+outAnimation = {keyframeName: 'fadeIn', duration: 600, reverse: true};
 ```
 
 ```angular2html
@@ -98,42 +90,59 @@ When you want to use typed objects instead of CSS you can provide a [`Keyframe`]
 const fadeIn: Keyframe[] = [
   {
     opacity: 0,
-    offset: 0,
+    offset: 0
   },
   {
     opacity: 1,
-    offset: 1,
-  },
+    offset: 1
+  }
 ];
 ```
 
 ```typescript
-inAnimation = { keyframes: fadeIn, duration: 600 };
-outAnimation = { keyframes: fadeIn, duration: 600, reverse: true };
+inAnimation = {keyframes: fadeIn, duration: 600};
+outAnimation = {keyframes: fadeIn, duration: 600, reverse: true};
 ```
 
 ```angular2html
 <img transitionName="profile-picture" [inAnimation]="inAnimation" [outAnimation]="outAnimation" src="...">
 ```
 
+#### Further customization
+
+You can further customize the animation by passing standard
+[CSS animation properties](https://developer.mozilla.org/de/docs/Web/CSS/Reference/Properties/animation),
+such as `fill-mode`, `delay`, or `timing-function`.
+
+```ts
+animation = {
+  keyframeName: 'fadeIn',
+  duration: 600,
+  reverse: true,
+  fillMode: 'forwards',
+  timingFunction: 'ease-in',
+  delay: 100
+};
+```
+
 ### Built-In animations
 
 To start faster there are some built-in animations available under `DefaultTransitions.*`.
 
 ```typescript
-import { DefaultTransitions } from 'ngx-easy-view-transitions';
+import {DefaultTransitions} from 'ngx-easy-view-transitions';
 
-inAnimation = { keyframes: DefaultTransitions.fadeInUp, duration: 600 };
+inAnimation = {keyframes: DefaultTransitions.fadeInUp, duration: 600};
 ```
 
 You can see them in the [demo](https://derstimmler.github.io/ngx-easy-view-transitions/animations) and [here](https://github.com/DerStimmler/ngx-easy-view-transitions/blob/main/ngx-easy-view-transitions/src/lib/default-transitions.ts).
 
 ### Exclude element from view transitions
 
-When you want to exclude an element form view transitions you can add the `noTransition` directive.
+When you want to exclude an element from view transitions, you can add the `noTransition` directive.
 
 ```typescript
-import { NoTransitionDirective } from 'ngx-easy-view-transitions';
+import {NoTransitionDirective} from 'ngx-easy-view-transitions';
 ```
 
 ```angular2html
@@ -142,10 +151,10 @@ import { NoTransitionDirective } from 'ngx-easy-view-transitions';
 
 ### Configure default transition
 
-By default View Transitions API will perform a cross-fade animation on all elements.
+By default, View Transitions API will perform a cross-fade animation on all elements.
 But you can also provide your own in and out animations by adding the `provideDefaultViewTransition()` provider function.
 
-In the following example the default animation gets disabled:
+In the following example, the default animation gets disabled:
 
 ```typescript
 bootstrapApplication(AppComponent,
@@ -153,14 +162,18 @@ bootstrapApplication(AppComponent,
     providers: [
       provideRouter(appRoutes, withViewTransitions()),
       provideDefaultViewTransition(
-        { keyframes: DefaultTransitions.none, duration: 0 },
-        { keyframes: DefaultTransitions.none, duration: 0 }
+        {keyframes: DefaultTransitions.none, duration: 0},
+        {keyframes: DefaultTransitions.none, duration: 0}
       )
     ]
   }
 );
 ```
 
+### Troubleshooting
+
+If your elements flicker when navigating, try to set the `fillMode` to `forwards`.
+
 ## Development
 
 Install dependencies with: `pnpm install`
@@ -174,4 +187,4 @@ Run `pnpm lint` to lint all projects.
 
 Run `pnpm build` to build all projects. You can find the output under `/dist`.
 
-Since it's a nx workspace you can use the common nx commands for everything else.
+Since it's a nx workspace, you can use the common nx commands for everything else.