The requested page requires authentication.
Please sign in to continue.
diff --git a/utils/transition-group/transition-group.component.ts b/utils/transition-group/transition-group.component.ts
index 14fc2648..5a3ae537 100644
--- a/utils/transition-group/transition-group.component.ts
+++ b/utils/transition-group/transition-group.component.ts
@@ -1,7 +1,16 @@
import {TransitionGroupItemDirective} from "./transition-group-item.directive";
import {AfterViewInit, Component, ContentChildren, OnDestroy, QueryList, ViewEncapsulation} from "@angular/core";
import {Subscription} from "rxjs";
+import {THREE} from "@angular/cdk/keycodes";
+/**
+ * Transition Component for array changes
+ *
+ * Call init() method if array is changed. e.g. (different array, insert, delete) and before swap action
+ *
+ * If a change is triggered, but you want to avoid transition use disable() - (Your changes) - init() - enable()
+ *
+ * */
@Component({
selector: '[transition-group]',
template: '
',
@@ -10,35 +19,38 @@ import {Subscription} from "rxjs";
})
export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
@ContentChildren(TransitionGroupItemDirective) items: QueryList
;
+ private disabled: boolean = false;
private subscription: Subscription;
ngAfterViewInit() {
this.init();
this.subscription = this.items.changes.subscribe(items => {
- items.forEach(item => item.prevPos = item.newPos || item.prevPos);
- items.forEach(this.runCallback);
- this.refreshPosition('newPos');
- items.forEach(item => item.prevPos = item.prevPos || item.newPos); // for new items
-
- const animate = () => {
- items.forEach(this.applyTranslation);
- this['_forceReflow'] = document.body.offsetHeight; // force reflow to put everything in position
- this.items.forEach(this.runTransition.bind(this));
- }
-
- const willMoveSome = items.some((item) => {
- const dx = item.prevPos.left - item.newPos.left;
- const dy = item.prevPos.top - item.newPos.top;
- return dx || dy;
- });
-
- if (willMoveSome) {
- animate();
- } else {
- setTimeout(() => { // for removed items
- this.refreshPosition('newPos');
+ if(!this.disabled) {
+ items.forEach(item => item.prevPos = item.newPos || item.prevPos);
+ items.forEach(this.runCallback);
+ this.refreshPosition('newPos');
+ items.forEach(item => item.prevPos = item.prevPos || item.newPos); // for new items
+
+ const animate = () => {
+ items.forEach(this.applyTranslation);
+ this['_forceReflow'] = document.body.offsetHeight; // force reflow to put everything in position
+ this.items.forEach(this.runTransition.bind(this));
+ }
+
+ const willMoveSome = items.some((item) => {
+ const dx = item.prevPos.left - item.newPos.left;
+ const dy = item.prevPos.top - item.newPos.top;
+ return dx || dy;
+ });
+
+ if (willMoveSome) {
animate();
- }, 0);
+ } else {
+ setTimeout(() => { // for removed items
+ this.refreshPosition('newPos');
+ animate();
+ }, 0);
+ }
}
});
}
@@ -49,6 +61,10 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
}
}
+ /**
+ * Should be used in every array change e.g. (different array, insert, delete)
+ * and before swap action
+ * */
init() {
this.refreshPosition('prevPos');
this.refreshPosition('newPos');
@@ -95,4 +111,20 @@ export class TransitionGroupComponent implements AfterViewInit, OnDestroy {
style.transitionDuration = '0s';
}
}
+
+ /**
+ * Enable transition
+ *
+ * */
+ enable() {
+ this.disabled = false;
+ }
+
+ /**
+ * Disable transition
+ *
+ * */
+ disable() {
+ this.disabled = true;
+ }
}