From a40aebb8378d03d50aed9b8a598080524bfd31e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lukas=20Mau=C3=9F?= <lukas.mauss@mni.thm.de>
Date: Wed, 7 Aug 2019 20:11:09 +0200
Subject: [PATCH] Try to animate sorting - not working as expected
---
.../comment-list/comment-list.component.html | 2 +-
.../comment-list/comment-list.component.ts | 19 ++++++++++++++++++-
.../shared/comment/comment.component.html | 2 +-
3 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/src/app/components/shared/comment-list/comment-list.component.html b/src/app/components/shared/comment-list/comment-list.component.html
index 4772cd1c7..bec219d75 100644
--- a/src/app/components/shared/comment-list/comment-list.component.html
+++ b/src/app/components/shared/comment-list/comment-list.component.html
@@ -99,7 +99,7 @@
<div *ngIf="!isLoading">
<app-comment *ngFor="let current of hideCommentsList ? filteredComments : comments" [comment]="current"
- [parseVote]="getVote(current)"></app-comment>
+ [parseVote]="getVote(current)" [@sortList]></app-comment>
</div>
<div *ngIf="comments && comments.length < 1 && !isLoading" fxLayout="row" fxLayoutAlign="center center"
diff --git a/src/app/components/shared/comment-list/comment-list.component.ts b/src/app/components/shared/comment-list/comment-list.component.ts
index 39db2a14e..724eb13a9 100644
--- a/src/app/components/shared/comment-list/comment-list.component.ts
+++ b/src/app/components/shared/comment-list/comment-list.component.ts
@@ -14,11 +14,28 @@ import { Room } from '../../../models/room';
import { RoomService } from '../../../services/http/room.service';
import { VoteService } from '../../../services/http/vote.service';
import { NotificationService } from '../../../services/util/notification.service';
+import { animate, keyframes, query, stagger, state, style, transition, trigger } from '@angular/animations';
@Component({
selector: 'app-comment-list',
templateUrl: './comment-list.component.html',
- styleUrls: ['./comment-list.component.scss']
+ styleUrls: ['./comment-list.component.scss'],
+ animations: [
+
+ trigger('sortList', [
+ transition('* => *', [
+
+ query(':enter', style({ opacity: 0 }), { optional: true }),
+
+ query(':enter', stagger('0.3s', [
+ animate('1s ease-in', keyframes([
+ style({ opacity: 0, transform: 'translateY(-20%)', offset: 0 }),
+ style({ opacity: .5, transform: 'translateY(10%)', offset: 0.4 }),
+ style({ opacity: 1, transform: 'translateY(0)', offset: 1.0 }),
+ ]))]), { optional: true })
+ ])
+ ])
+ ]
})
export class CommentListComponent implements OnInit {
@ViewChild('searchBox') searchField: ElementRef;
diff --git a/src/app/components/shared/comment/comment.component.html b/src/app/components/shared/comment/comment.component.html
index 099509c1c..e0fa004e7 100644
--- a/src/app/components/shared/comment/comment.component.html
+++ b/src/app/components/shared/comment/comment.component.html
@@ -1,5 +1,5 @@
<mat-card id="comment-card" [ngClass]="{'highlighted': comment.highlighted,
- '': !comment.highlighted}" [@slide]>
+ '': !comment.highlighted}">
<div fxLayout="column">
<div fxLayout="row">
<div class="date-container">
--
GitLab