ngx-easy-view-transitions 0.0.1 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +10 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -22,7 +22,6 @@ npm install ngx-easy-view-transitions
|
|
|
22
22
|
You have to enable Angulars built-in view transitions in the Router using the [`withViewTransitions()`](https://angular.io/api/router/withViewTransitions#usage-notes) function.
|
|
23
23
|
|
|
24
24
|
```typescript
|
|
25
|
-
const appRoutes: Routes = [];
|
|
26
25
|
bootstrapApplication(AppComponent,
|
|
27
26
|
{
|
|
28
27
|
providers: [
|
|
@@ -38,6 +37,10 @@ bootstrapApplication(AppComponent,
|
|
|
38
37
|
|
|
39
38
|
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.
|
|
40
39
|
|
|
40
|
+
```typescript
|
|
41
|
+
import { TransitionNameDirective } from 'ngx-easy-view-transitions';
|
|
42
|
+
```
|
|
43
|
+
|
|
41
44
|
`users.component.html`
|
|
42
45
|
|
|
43
46
|
```angular2html
|
|
@@ -113,6 +116,8 @@ outAnimation = { keyframes: fadeIn, duration: 600, reverse: true };
|
|
|
113
116
|
To start faster there are some default animations available under `DefaultTransitions.*`.
|
|
114
117
|
|
|
115
118
|
```typescript
|
|
119
|
+
import { DefaultTransitions } from 'ngx-easy-view-transitions';
|
|
120
|
+
|
|
116
121
|
inAnimation = { keyframes: DefaultTransitions.fadeInUp, duration: 600 };
|
|
117
122
|
```
|
|
118
123
|
|
|
@@ -122,6 +127,10 @@ You can see them in the [demo](https://derstimmler.github.io/ngx-easy-view-trans
|
|
|
122
127
|
|
|
123
128
|
When you want to exclude an element form view transitions you can add the `noTransition` directive.
|
|
124
129
|
|
|
130
|
+
```typescript
|
|
131
|
+
import { NoTransitionDirective } from 'ngx-easy-view-transitions';
|
|
132
|
+
```
|
|
133
|
+
|
|
125
134
|
```angular2html
|
|
126
135
|
<img noTransition src="...">
|
|
127
136
|
```
|