From 161873b68cae2949c5cf3494d0e7953956168432 Mon Sep 17 00:00:00 2001
From: Sean Engelhardt <sean.f.t.engelhardt@gmail.com>
Date: Fri, 14 Jun 2019 15:19:52 +0200
Subject: [PATCH] Speeds up the animations.

Removed the on-transition-fade class
The current way to trigger animation seemed not reliable enough.
---
 client/src/app/shared/animations.ts           | 24 ++++------
 .../head-bar/head-bar.component.html          | 30 ++++--------
 .../list-view-table.component.html            |  2 +-
 .../sort-filter-bar.component.html            |  2 +-
 .../sorting-list/sorting-list.component.html  |  2 +-
 .../agenda-import-list.component.html         |  4 +-
 .../list-of-speakers.component.html           | 14 ++++--
 .../assignment-detail.component.html          | 15 ++++--
 .../assignment-poll.component.html            |  6 +--
 .../components/error/error.component.html     |  2 +-
 .../history-list/history-list.component.html  |  4 +-
 .../call-list/call-list.component.html        |  2 +-
 .../category-detail.component.html            | 26 ++++------
 .../category-list.component.html              |  2 +-
 ...motion-comment-section-list.component.html | 26 ++--------
 .../amendment-create-wizard.component.html    | 11 +++--
 .../motion-detail.component.html              | 48 +++++++++----------
 .../motion-poll/motion-poll.component.html    | 16 ++-----
 .../motion-import-list.component.html         |  4 +-
 .../workflow-detail.component.html            | 20 ++++----
 .../statute-import-list.component.html        |  2 +-
 .../statute-paragraph-list.component.html     | 17 +------
 .../tag-list/tag-list.component.html          |  2 +-
 .../group-list/group-list.component.html      | 26 ++++++----
 .../user-import-list.component.html           |  4 +-
 client/src/styles.scss                        |  5 --
 26 files changed, 134 insertions(+), 182 deletions(-)

diff --git a/client/src/app/shared/animations.ts b/client/src/app/shared/animations.ts
index c41f83bd6..4c11aa4e9 100644
--- a/client/src/app/shared/animations.ts
+++ b/client/src/app/shared/animations.ts
@@ -3,7 +3,7 @@ import { trigger, animate, transition, style, query, stagger, group } from '@ang
 const fadeVanish = [
     style({ transform: 'translateY(0%)', opacity: 1 }),
     animate(
-        '200ms ease-in-out',
+        '150ms ease-in-out',
         style({
             transform: 'translateY(0%)',
             opacity: 0
@@ -11,16 +11,17 @@ const fadeVanish = [
     )
 ];
 
-const fadeAppear = [
-    style({ transform: 'translateY(0%)', opacity: 0 }),
-    animate('200ms ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
-];
+// Requires more generic way to trigger parallel animations
+// const fadeAppear = [
+//     style({ transform: 'translateY(0%)', opacity: 0 }),
+//     animate('200ms ease-in-out', style({ transform: 'translateY(0%)', opacity: 1 }))
+// ];
 
 const justEnterDom = [style({ opacity: 0 })];
 
 const fadeMoveIn = [
     style({ transform: 'translateY(30px)' }),
-    animate('250ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
+    animate('150ms ease-in-out', style({ transform: 'translateY(0px)', opacity: 1 }))
 ];
 
 export const pageTransition = trigger('pageTransition', [
@@ -30,28 +31,19 @@ export const pageTransition = trigger('pageTransition', [
 
         /** keep the dom clean - let all items "just" enter */
         query(':enter mat-card', justEnterDom, { optional: true }),
-        query(':enter .on-transition-fade', justEnterDom, { optional: true }),
         query(':enter mat-row', justEnterDom, { optional: true }),
-        query(':enter mat-expansion-panel', justEnterDom, { optional: true }),
 
         /** parallel vanishing */
         group([
-            query(':leave .on-transition-fade', fadeVanish, { optional: true }),
             query(':leave mat-card', fadeVanish, { optional: true }),
-            query(':leave mat-row', fadeVanish, { optional: true }),
-            query(':leave mat-expansion-panel', fadeVanish, { optional: true })
+            query(':leave mat-row', fadeVanish, { optional: true })
         ]),
 
         /** parallel appearing */
         group([
-            /** animate fade in for the selected components */
-            query(':enter .on-transition-fade', fadeAppear, { optional: true }),
-
             /** Staggered appearing = "one after another" */
             query(':enter mat-card', stagger(50, fadeMoveIn), { optional: true }),
             query(':enter mat-row', stagger(30, fadeMoveIn), { optional: true })
-            // disabled for now. They somehow appear expanded which looks strange
-            // query(':enter mat-expansion-panel', stagger(30, fadeMoveIn), { optional: true })
         ])
     ])
 ]);
diff --git a/client/src/app/shared/components/head-bar/head-bar.component.html b/client/src/app/shared/components/head-bar/head-bar.component.html
index 1b18b62aa..239f9dbdb 100644
--- a/client/src/app/shared/components/head-bar/head-bar.component.html
+++ b/client/src/app/shared/components/head-bar/head-bar.component.html
@@ -1,37 +1,27 @@
 <mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" *ngIf="!vp.isMobile">
     <!-- Nav menu -->
-    <button mat-icon-button class="on-transition-fade" *ngIf="!multiSelectMode" (click)="clickHamburgerMenu()">
+    <button mat-icon-button *ngIf="!multiSelectMode" (click)="clickHamburgerMenu()">
         <mat-icon>menu</mat-icon>
     </button>
 </mat-toolbar>
 <mat-toolbar color="primary" [ngClass]="multiSelectMode ? 'multi-select' : ''" class="sticky-toolbar">
     <div class="toolbar-left">
         <!-- Nav menu -->
-        <button
-            mat-icon-button
-            class="on-transition-fade"
-            *ngIf="vp.isMobile && nav && !multiSelectMode"
-            (click)="clickHamburgerMenu()"
-        >
+        <button mat-icon-button *ngIf="vp.isMobile && nav && !multiSelectMode" (click)="clickHamburgerMenu()">
             <mat-icon>menu</mat-icon>
         </button>
 
         <!-- Exit / Back button -->
-        <button
-            mat-icon-button
-            class="on-transition-fade"
-            *ngIf="!nav && !editMode && !multiSelectMode"
-            (click)="onBackButton()"
-        >
+        <button mat-icon-button *ngIf="!nav && !editMode && !multiSelectMode" (click)="onBackButton()">
             <mat-icon>arrow_back</mat-icon>
         </button>
 
         <!-- Cancel edit button -->
-        <button mat-icon-button class="on-transition-fade" *ngIf="editMode" (click)="sendMainEvent()">
+        <button mat-icon-button *ngIf="editMode" (click)="sendMainEvent()">
             <mat-icon>close</mat-icon>
         </button>
 
-        <div class="toolbar-left-text on-transition-fade" *ngIf="!multiSelectMode">
+        <div class="toolbar-left-text" *ngIf="!multiSelectMode">
             <!-- Title slot -->
             <ng-content select=".title-slot"></ng-content>
         </div>
@@ -39,21 +29,20 @@
 
     <!-- centered information slot -->
     <div *ngIf="!multiSelectMode" class="spacer"></div>
-    <div class="toolbar-centered on-transition-fade" *ngIf="multiSelectMode">
+    <div class="toolbar-centered" *ngIf="multiSelectMode">
         <ng-content select=".central-info-slot"></ng-content>
     </div>
     <div class="spacer"></div>
 
     <div class="toolbar-right">
         <!-- Extra controls slot -->
-        <div class="extra-controls-wrapper on-transition-fade">
+        <div class="extra-controls-wrapper">
             <ng-content select=".extra-controls-slot"></ng-content>
         </div>
 
         <!-- Main action button - desktop -->
         <button
             mat-icon-button
-            class="on-transition-fade"
             *ngIf="mainButtonIcon == 'add' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
             (click)="sendMainEvent()"
         >
@@ -61,7 +50,6 @@
         </button>
         <button
             mat-icon-button
-            class="on-transition-fade"
             *ngIf="mainButtonIcon == 'edit' && mainButton && !editMode && !vp.isMobile && !multiSelectMode"
             (click)="sendMainEvent()"
         >
@@ -72,7 +60,7 @@
         <button mat-button *ngIf="editMode" (click)="save()"><strong translate class="upper">Save</strong></button>
 
         <!-- Menu button slot -->
-        <ng-content class="on-transition-fade" *ngIf="!editMode" select=".menu-slot"></ng-content>
+        <ng-content *ngIf="!editMode" select=".menu-slot"></ng-content>
     </div>
 </mat-toolbar>
 
@@ -80,7 +68,7 @@
 
 <button
     mat-fab
-    class="head-button on-transition-fade"
+    class="head-button "
     *ngIf="mainButton && !editMode && vp.isMobile && !multiSelectMode"
     (click)="sendMainEvent()"
 >
diff --git a/client/src/app/shared/components/list-view-table/list-view-table.component.html b/client/src/app/shared/components/list-view-table/list-view-table.component.html
index a4c7dfa1b..214da947b 100644
--- a/client/src/app/shared/components/list-view-table/list-view-table.component.html
+++ b/client/src/app/shared/components/list-view-table/list-view-table.component.html
@@ -1,4 +1,4 @@
-<mat-drawer-container class="on-transition-fade" *ngIf="columns && columnSet">
+<mat-drawer-container *ngIf="columns && columnSet">
     <os-sort-filter-bar
         *ngIf="showFilterBar"
         [filterCount]="countFilter"
diff --git a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
index 3f581ed34..342e6d6c0 100644
--- a/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
+++ b/client/src/app/shared/components/sort-filter-bar/sort-filter-bar.component.html
@@ -1,4 +1,4 @@
-<div class="custom-table-header flex-spaced on-transition-fade">
+<div class="custom-table-header flex-spaced">
     <!-- Amount of filters -->
     <div class="filter-count" *ngIf="filterService">
         <span>{{ displayedCount }}&nbsp;</span><span translate>of</span>
diff --git a/client/src/app/shared/components/sorting-list/sorting-list.component.html b/client/src/app/shared/components/sorting-list/sorting-list.component.html
index 0b13c25c0..d041e8978 100644
--- a/client/src/app/shared/components/sorting-list/sorting-list.component.html
+++ b/client/src/app/shared/components/sorting-list/sorting-list.component.html
@@ -9,7 +9,7 @@
         (click)="onItemClick($event, i)"
         (cdkDragStarted)="dragStarted(i)"
     >
-        <div class="section-one " cdkDragHandle *ngIf="enable">
+        <div class="section-one" cdkDragHandle *ngIf="enable">
             <mat-icon>drag_indicator</mat-icon>
         </div>
         <div class="section-two">
diff --git a/client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html b/client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html
index 4d57ecfd6..f59e95a72 100644
--- a/client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html
+++ b/client/src/app/site/agenda/components/agenda-import-list/agenda-import-list.component.html
@@ -79,7 +79,7 @@
                 </mat-form-field>
                 <mat-form-field>
                     <mat-label translate>Text separator</mat-label>
-                    <mat-select class="selection" (selectionChange)="selectTextSep($event)" value="&quot;">
+                    <mat-select class="selection" (selectionChange)="selectTextSep($event)" value='"'>
                         <mat-option *ngFor="let option of textSeparators" [value]="option.value">
                             {{ option.label | translate }}
                         </mat-option>
@@ -139,7 +139,7 @@
         </mat-select>
     </div>
     <div class="table-container">
-        <table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
+        <table mat-table [dataSource]="dataSource" matSort>
             <!-- Status column -->
             <ng-container matColumnDef="status" class="first-column" sticky>
                 <mat-header-cell *matHeaderCellDef></mat-header-cell>
diff --git a/client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.html b/client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.html
index 48389fc39..334aa5eed 100644
--- a/client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.html
+++ b/client/src/app/site/agenda/components/list-of-speakers/list-of-speakers.component.html
@@ -13,7 +13,7 @@
 
 <mat-card class="os-card speaker-card" *ngIf="viewListOfSpeakers">
     <!-- Title -->
-    <h1 class="los-title on-transition-fade">{{ viewListOfSpeakers.getTitle() }}</h1>
+    <h1 class="los-title">{{ viewListOfSpeakers.getTitle() }}</h1>
 
     <!-- List of finished speakers -->
     <mat-expansion-panel *ngIf="finishedSpeakers && finishedSpeakers.length > 0" class="finished-list">
@@ -89,12 +89,20 @@
                 <!-- Start, start and delete buttons -->
                 <span *osPerms="'agenda.can_manage_list_of_speakers'">
                     <!-- start button -->
-                    <button mat-icon-button matTooltip="{{ 'Begin speech' | translate }}" (click)="onStartButton(speaker)">
+                    <button
+                        mat-icon-button
+                        matTooltip="{{ 'Begin speech' | translate }}"
+                        (click)="onStartButton(speaker)"
+                    >
                         <mat-icon>play_arrow</mat-icon>
                     </button>
 
                     <!-- star button -->
-                    <button mat-icon-button matTooltip="{{ 'Mark speaker' | translate }}" (click)="onMarkButton(speaker)">
+                    <button
+                        mat-icon-button
+                        matTooltip="{{ 'Mark speaker' | translate }}"
+                        (click)="onMarkButton(speaker)"
+                    >
                         <mat-icon>{{ speaker.marked ? 'star' : 'star_border' }}</mat-icon>
                     </button>
 
diff --git a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
index fcff271b9..4ae48f3e4 100644
--- a/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
+++ b/client/src/app/site/assignments/components/assignment-detail/assignment-detail.component.html
@@ -56,12 +56,15 @@
 </div>
 
 <ng-template #metaInfoTemplate>
-    <mat-card class="os-card " *ngIf="assignment">
+    <mat-card class="os-card" *ngIf="assignment">
         <div *ngIf="!editAssignment && assignment.getTitle">
             <h1>{{ assignment.getTitle() }}</h1>
         </div>
         <div *ngIf="assignment">
-            <div *ngIf="assignment.assignment.description" [innerHTML]="getSanitizedText(assignment.assignment.description)"></div>
+            <div
+                *ngIf="assignment.assignment.description"
+                [innerHTML]="getSanitizedText(assignment.assignment.description)"
+            ></div>
         </div>
         <div class="meta-info-grid">
             <div class="number-of-elected">
@@ -111,8 +114,7 @@
 </ng-template>
 
 <!-- poll template -->
-<ng-template #pollTemplate
->
+<ng-template #pollTemplate>
     <div class="ballot-controls-grid">
         <div class="ballot-title" *ngIf="assignment && assignment.polls && assignment.polls.length">
             <h3 translate>Election result</h3>
@@ -205,7 +207,10 @@
             </div>
         </div>
     </div>
-    <mat-divider *ngIf="assignment && assignment.polls && assignment.polls.length" class="candidate-list-separator"></mat-divider>
+    <mat-divider
+        *ngIf="assignment && assignment.polls && assignment.polls.length"
+        class="candidate-list-separator"
+    ></mat-divider>
 </ng-template>
 
 <!-- Form -->
diff --git a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
index 3767fd65c..299753b62 100644
--- a/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
+++ b/client/src/app/site/assignments/components/assignment-poll/assignment-poll.component.html
@@ -40,7 +40,7 @@
         </mat-menu>
     </div>
 
-    <div class="on-transition-fade poll-main-content" *ngIf="poll.options">
+    <div class="poll-main-content" *ngIf="poll.options">
         <div *ngIf="pollData">
             <div class="poll-grid">
                 <div></div>
@@ -105,7 +105,7 @@
                 <div>
                     <div *ngIf="poll.has_votes">
                         <div *ngFor="let vote of option.votes" class="spacer-bottom-10">
-                            <div class="poll-progress on-transition-fade">
+                            <div class="poll-progress">
                                 <span *ngIf="vote.value !== 'Votes'"
                                     >{{ pollService.getLabel(vote.value) | translate }}:</span
                                 >
@@ -184,7 +184,7 @@
     <div *ngIf="canManage" class="hint-form" [formGroup]="descriptionForm">
         <mat-form-field class="wide">
             <mat-label translate>Hint for ballot paper</mat-label>
-            <input matInput formControlName="description"/>
+            <input matInput formControlName="description" />
         </mat-form-field>
         <button mat-icon-button [disabled]="!dirtyDescription" (click)="onEditDescriptionButton()">
             <mat-icon inline>check</mat-icon>
diff --git a/client/src/app/site/common/components/error/error.component.html b/client/src/app/site/common/components/error/error.component.html
index 7ca616a4a..53dcb5157 100644
--- a/client/src/app/site/common/components/error/error.component.html
+++ b/client/src/app/site/common/components/error/error.component.html
@@ -4,6 +4,6 @@
     </div>
 </os-head-bar>
 
-<mat-card class="os-card on-transition-fade">
+<mat-card class="os-card">
     <h1 translate>You do not have the required permission to see that page!</h1>
 </mat-card>
diff --git a/client/src/app/site/history/components/history-list/history-list.component.html b/client/src/app/site/history/components/history-list/history-list.component.html
index 27d82705b..53c2c2d43 100644
--- a/client/src/app/site/history/components/history-list/history-list.component.html
+++ b/client/src/app/site/history/components/history-list/history-list.component.html
@@ -39,7 +39,7 @@
     </div>
 </div>
 
-<mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
+<mat-table [dataSource]="dataSource" matSort>
     <!-- Timestamp -->
     <ng-container matColumnDef="time">
         <mat-header-cell *matHeaderCellDef translate>Timestamp</mat-header-cell>
@@ -77,7 +77,7 @@
     <mat-row *matRowDef="let row; columns: getRowDef()" (click)="onClickRow(row)"></mat-row>
 </mat-table>
 
-<mat-paginator class="on-transition-fade" [pageSizeOptions]="pageSizes"></mat-paginator>
+<mat-paginator [pageSizeOptions]="pageSizes"></mat-paginator>
 
 <mat-menu #historyMenu="matMenu">
     <button mat-menu-item class="red-warning-text" (click)="clearHistory()">
diff --git a/client/src/app/site/motions/modules/call-list/call-list.component.html b/client/src/app/site/motions/modules/call-list/call-list.component.html
index 479c41743..17e965eda 100644
--- a/client/src/app/site/motions/modules/call-list/call-list.component.html
+++ b/client/src/app/site/motions/modules/call-list/call-list.component.html
@@ -12,7 +12,7 @@
     </div>
 </os-head-bar>
 
-<div class="custom-table-header flex-spaced on-transition-fade">
+<div class="custom-table-header flex-spaced">
     <div class="filter-count">
         <span> {{ seenNodes[0] }}&nbsp;</span><span translate>of</span>
         <span>&nbsp;{{ seenNodes[1] }}</span>
diff --git a/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html b/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html
index f62b9d52b..fd3bc8dee 100644
--- a/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html
+++ b/client/src/app/site/motions/modules/category/components/category-detail/category-detail.component.html
@@ -22,7 +22,7 @@
             <span>{{ getLevelDashes(category) }}</span>
             {{ category.prefixedName }}
         </h2>
-        <table class="os-headed-listview-table on-transition-fade" mat-table [dataSource]="dataSources[category.id]">
+        <table class="os-headed-listview-table" mat-table [dataSource]="dataSources[category.id]">
             <!-- title column -->
             <ng-container matColumnDef="title">
                 <mat-header-cell *matHeaderCellDef> <span translate>Motion</span> </mat-header-cell>
@@ -93,25 +93,19 @@
     <div class="os-form-card-mobile" mat-dialog-content>
         <form class="edit-form" [formGroup]="editForm" (ngSubmit)="save()" (keydown)="onKeyDown($event)">
             <mat-form-field>
-                <input matInput osAutofocus placeholder="{{ 'Prefix' | translate }}" formControlName="prefix"/>
+                <input matInput osAutofocus placeholder="{{ 'Prefix' | translate }}" formControlName="prefix" />
             </mat-form-field>
             <mat-form-field>
-                <input matInput osAutofocus placeholder="{{ 'Name' | translate }}" formControlName="name" required/>
+                <input matInput osAutofocus placeholder="{{ 'Name' | translate }}" formControlName="name" required />
             </mat-form-field>
         </form>
     </div>
     <div mat-dialog-actions>
-            <button
-                type="submit"
-                mat-button
-                [disabled]="!editForm.valid"
-                color="primary"
-                (click)="save()"
-            >
-                <span translate>Save</span>
-            </button>
-            <button type="button" mat-button [mat-dialog-close]="null">
-                <span translate>Cancel</span>
-            </button>
-        </div>
+        <button type="submit" mat-button [disabled]="!editForm.valid" color="primary" (click)="save()">
+            <span translate>Save</span>
+        </button>
+        <button type="button" mat-button [mat-dialog-close]="null">
+            <span translate>Cancel</span>
+        </button>
+    </div>
 </ng-template>
diff --git a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
index 848042a96..34048f3f8 100644
--- a/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
+++ b/client/src/app/site/motions/modules/category/components/category-list/category-list.component.html
@@ -49,7 +49,7 @@
 
 <!-- Table -->
 <mat-card class="os-card">
-    <table class="os-headed-listview-table on-transition-fade" mat-table [dataSource]="dataSource">
+    <table class="os-headed-listview-table" mat-table [dataSource]="dataSource">
         <!-- title column -->
         <ng-container matColumnDef="title">
             <mat-header-cell *matHeaderCellDef>
diff --git a/client/src/app/site/motions/modules/motion-comment-section/motion-comment-section-list.component.html b/client/src/app/site/motions/modules/motion-comment-section/motion-comment-section-list.component.html
index 32ba6bf31..8c76b5531 100644
--- a/client/src/app/site/motions/modules/motion-comment-section/motion-comment-section-list.component.html
+++ b/client/src/app/site/motions/modules/motion-comment-section/motion-comment-section-list.component.html
@@ -126,34 +126,16 @@
             <div class="spacer-left" *ngIf="section.write_groups.length === 0" translate>No groups selected</div>
         </ng-container>
         <mat-action-row>
-            <button
-                *ngIf="editId !== section.id"
-                mat-button
-                class="on-transition-fade"
-                (click)="onEditButton(section)"
-                mat-icon-button
-            >
+            <button *ngIf="editId !== section.id" mat-button (click)="onEditButton(section)" mat-icon-button>
                 <mat-icon>edit</mat-icon>
             </button>
-            <button
-                *ngIf="editId === section.id"
-                mat-button
-                class="on-transition-fade"
-                (click)="editId = null"
-                mat-icon-button
-            >
+            <button *ngIf="editId === section.id" mat-button (click)="editId = null" mat-icon-button>
                 <mat-icon>cancel</mat-icon>
             </button>
-            <button
-                *ngIf="editId === section.id"
-                mat-button
-                class="on-transition-fade"
-                (click)="onSaveButton(section)"
-                mat-icon-button
-            >
+            <button *ngIf="editId === section.id" mat-button (click)="onSaveButton(section)" mat-icon-button>
                 <mat-icon>save</mat-icon>
             </button>
-            <button mat-button class="on-transition-fade" (click)="onDeleteButton(section)" mat-icon-button>
+            <button mat-button (click)="onDeleteButton(section)" mat-icon-button>
                 <mat-icon>delete</mat-icon>
             </button>
         </mat-action-row>
diff --git a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html b/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
index 3044e8108..d801bbe76 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/amendment-create-wizard/amendment-create-wizard.component.html
@@ -15,7 +15,7 @@
     </div>
 </os-head-bar>
 
-<form [formGroup]="contentForm" (ngSubmit)="saveAmendment()" class="on-transition-fade">
+<form [formGroup]="contentForm" (ngSubmit)="saveAmendment()">
     <mat-horizontal-stepper #matStepper linear>
         <mat-step [completed]="contentForm.value.selectedParagraphs.length > 0">
             <ng-template matStepLabel>{{ 'Select paragraphs' | translate }}</ng-template>
@@ -37,7 +37,7 @@
                         *ngIf="!multipleParagraphsAllowed"
                         class="paragraph-select"
                         [checked]="isParagraphSelected(paragraph)"
-                        >
+                    >
                     </mat-radio-button>
                     <div class="paragraph-text motion-text" [innerHTML]="paragraph.safeHtml"></div>
                 </section>
@@ -52,10 +52,11 @@
             <section *ngFor="let paragraph of contentForm.value.selectedParagraphs">
                 <h4>
                     <span *ngIf="paragraph.lineFrom >= paragraph.lineTo - 1" class="line-number">
-                        {{ 'Line' | translate }} {{ paragraph.lineFrom }}:</span>
+                        {{ 'Line' | translate }} {{ paragraph.lineFrom }}:</span
+                    >
                     <span *ngIf="paragraph.lineFrom < paragraph.lineTo - 1" class="line-number">
-                        {{ 'Line' | translate }} {{ paragraph.lineFrom }}
-                        - {{ paragraph.lineTo - 1 }}:</span>
+                        {{ 'Line' | translate }} {{ paragraph.lineFrom }} - {{ paragraph.lineTo - 1 }}:</span
+                    >
                 </h4>
                 <editor [formControlName]="'text_' + paragraph.paragraphNo" [init]="tinyMceSettings"></editor>
             </section>
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
index e423440a5..425f2b384 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-detail/motion-detail.component.html
@@ -20,7 +20,7 @@
     </div>
 
     <!-- Back and forth buttons -->
-    <div *ngIf="!editMotion && !vp.isMobile" class="extra-controls-slot on-transition-fade">
+    <div *ngIf="!editMotion && !vp.isMobile" class="extra-controls-slot">
         <div *ngIf="previousMotion">
             <button mat-button (click)="navigateToMotion(previousMotion)">
                 <!-- possible icons:
@@ -103,7 +103,7 @@
 
 <div class="content-container" (touchstart)="swipe($event, 'start')" (touchend)="swipe($event, 'end')">
     <!-- Title -->
-    <div class="title on-transition-fade" *ngIf="motion && !editMotion">
+    <div class="title" *ngIf="motion && !editMotion">
         <div class="title-line">
             <h1>{{ motion.title }}</h1>
             <button mat-icon-button color="primary" (click)="toggleFavorite()">
@@ -130,9 +130,8 @@
 
 <ng-template #mobileView>
     <div *ngIf="motion" class="mobile-view">
-
         <!-- Meta info -->
-        <div class="on-transition-fade"><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
+        <div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
 
         <!-- Content -->
         <mat-card [ngClass]="editMotion ? 'os-form-card-mobile' : 'os-card'">
@@ -149,7 +148,7 @@
 
 <ng-template #desktopView>
     <div class="desktop-view" *ngIf="motion">
-        <div class="desktop-left on-transition-fade">
+        <div class="desktop-left">
             <!-- Meta Info -->
             <div><ng-container *ngTemplateOutlet="metaInfoTemplate"></ng-container></div>
 
@@ -436,9 +435,11 @@
 
 <ng-template #contentTemplate>
     <form class="motion-content" [formGroup]="contentForm" (keydown)="onKeyDown($event)">
-
         <!-- Toolbar with text controls and buttonf for managing the (modified) final version-->
-        <div class="motion-text-toolbar-wrapper outline-border-bottom" *ngIf="!editMotion && !motion.isStatuteAmendment()">
+        <div
+            class="motion-text-toolbar-wrapper outline-border-bottom"
+            *ngIf="!editMotion && !motion.isStatuteAmendment()"
+        >
             <!-- Line Number and Diff buttons -->
             <div class="motion-text-controls">
                 <mat-form-field class="motion-goto-line" *ngIf="highlightedLineOpened">
@@ -469,23 +470,20 @@
                     <mat-icon>cancel</mat-icon>
                 </button>
 
-                <button
-                    type="button"
-                    mat-button
-                    [matMenuTriggerFor]="lineNumberingMenu"
-                >
+                <button type="button" mat-button [matMenuTriggerFor]="lineNumberingMenu">
                     <mat-icon>format_list_numbered</mat-icon>
                     &nbsp;<span translate>Line numbering</span>
-                    <span *ngIf="lnMode === LineNumberingMode.None">
-                        &nbsp;(<span translate>none</span>)
-                    </span>
+                    <span *ngIf="lnMode === LineNumberingMode.None"> &nbsp;(<span translate>none</span>) </span>
                 </button>
                 <button
                     type="button"
                     mat-button
                     [matMenuTriggerFor]="changeRecoMenu"
                     *ngIf="
-                        motion && !motion.isParagraphBasedAmendment() && allChangingObjects && allChangingObjects.length > 0
+                        motion &&
+                        !motion.isParagraphBasedAmendment() &&
+                        allChangingObjects &&
+                        allChangingObjects.length > 0
                     "
                 >
                     <mat-icon>rate_review</mat-icon>
@@ -543,7 +541,7 @@
                     (click)="deleteModifiedFinalVersion()"
                 >
                     <mat-icon>delete</mat-icon>
-            </button>
+                </button>
             </div>
         </div>
 
@@ -646,11 +644,17 @@
             ></os-motion-detail-diff>
 
             <div *ngIf="isFinalEdit">
-                <editor [hidden]="!isFinalEdit" formControlName="modified_final_version" [init]="tinyMceSettings" required></editor>
+                <editor
+                    [hidden]="!isFinalEdit"
+                    formControlName="modified_final_version"
+                    [init]="tinyMceSettings"
+                    required
+                ></editor>
                 <div
                     *ngIf="
                         contentForm.get('modified_final_version').invalid &&
-                        (contentForm.get('modified_final_version').dirty || contentForm.get('modified_final_version').touched)
+                        (contentForm.get('modified_final_version').dirty ||
+                            contentForm.get('modified_final_version').touched)
                     "
                     class="red-warning-text"
                     translate
@@ -927,11 +931,7 @@
             outside
         </button>
         <mat-divider></mat-divider>
-        <button
-            mat-menu-item
-            *ngIf="!highlightedLineOpened"
-            (click)="highlightedLineOpened = true"
-        >
+        <button mat-menu-item *ngIf="!highlightedLineOpened" (click)="highlightedLineOpened = true">
             <mat-icon>redo</mat-icon>
             <span translate>Go to line</span>
         </button>
diff --git a/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html b/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html
index 359bfe616..2db9562b6 100644
--- a/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html
+++ b/client/src/app/site/motions/modules/motion-detail/components/motion-poll/motion-poll.component.html
@@ -4,9 +4,9 @@
         <span *ngIf="pollIndex">&nbsp;({{ pollIndex + 1 }})</span>
     </ng-container>
     <ng-container class="meta-text-block-content">
-        <div *ngIf="poll.has_votes" class="on-transition-fade poll-result">
+        <div *ngIf="poll.has_votes" class="poll-result">
             <div *ngFor="let key of pollValues">
-                <div class="poll-progress on-transition-fade" *ngIf="poll[key] !== undefined">
+                <div class="poll-progress" *ngIf="poll[key] !== undefined">
                     <mat-icon class="main-nav-color" matTooltip="{{ getLabel(key) | translate }}">
                         {{ getIcon(key) }}
                     </mat-icon>
@@ -55,18 +55,10 @@
         <button mat-icon-button matTooltip="{{ 'Edit' | translate }}" (click)="editPoll()">
             <mat-icon inline>edit</mat-icon>
         </button>
-        <button
-            mat-icon-button
-            matTooltip="{{ 'Print ballot papers' | translate }}"
-            (click)="printBallots()"
-        >
+        <button mat-icon-button matTooltip="{{ 'Print ballot papers' | translate }}" (click)="printBallots()">
             <mat-icon inline>local_printshop</mat-icon>
         </button>
-        <button
-            mat-icon-button
-            matTooltip="{{ 'Delete' | translate }}"
-            (click)="deletePoll()"
-        >
+        <button mat-icon-button matTooltip="{{ 'Delete' | translate }}" (click)="deletePoll()">
             <mat-icon inline>delete</mat-icon>
         </button>
     </ng-container>
diff --git a/client/src/app/site/motions/modules/motion-import/motion-import-list.component.html b/client/src/app/site/motions/modules/motion-import/motion-import-list.component.html
index ee3459a28..5dccc4a97 100644
--- a/client/src/app/site/motions/modules/motion-import/motion-import-list.component.html
+++ b/client/src/app/site/motions/modules/motion-import/motion-import-list.component.html
@@ -107,7 +107,7 @@
         </mat-select>
     </div>
     <div class="table-container">
-        <table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
+        <table mat-table [dataSource]="dataSource" matSort>
             <!-- Status column -->
             <ng-container matColumnDef="status" sticky>
                 <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>
@@ -238,7 +238,7 @@
                             *ngIf="hasError(entry, 'Tags')"
                             matTooltip="{{ getVerboseError('Tags') | translate }}"
                         >
-                        warning
+                            warning
                         </mat-icon>
                         <div *ngFor="let tag of entry.newEntry.csvTags">
                             {{ tag.name }}
diff --git a/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html b/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html
index a5eead1d6..36bb5d94b 100644
--- a/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html
+++ b/client/src/app/site/motions/modules/motion-workflow/components/workflow-detail/workflow-detail.component.html
@@ -7,7 +7,7 @@
     </div>
 
     <!-- Edit button -->
-    <div class="extra-controls-slot on-transition-fade">
+    <div class="extra-controls-slot">
         <button mat-icon-button (click)="onEditWorkflowButton()">
             <mat-icon>edit</mat-icon>
         </button>
@@ -24,7 +24,7 @@
     </div>
 
     <div class="scrollable-matrix">
-        <table mat-table class="on-transition-fade" [dataSource]="getTableDataSource()">
+        <table mat-table [dataSource]="getTableDataSource()">
             <ng-container matColumnDef="perm" sticky>
                 <mat-header-cell class="group-head-table-cell" *matHeaderCellDef translate>Permissions</mat-header-cell>
                 <mat-cell *matCellDef="let perm">
@@ -112,13 +112,9 @@
                                     -
                                 </div>
                                 <div *ngIf="state.restriction.length">
-                                    <span
-                                        *ngFor="
-                                            let restriction of state.restriction;
-                                            let last = last
-                                        "
-                                    >
-                                        {{ getRestrictionLabel(restriction) | translate }}<span *ngIf="!last">,&nbsp;</span>
+                                    <span *ngFor="let restriction of state.restriction; let last = last">
+                                        {{ getRestrictionLabel(restriction) | translate
+                                        }}<span *ngIf="!last">,&nbsp;</span>
                                     </span>
                                 </div>
                             </div>
@@ -193,7 +189,11 @@
 <!-- Select restriction menu -->
 <mat-menu matMenuContent #restrictionMenu="matMenu">
     <ng-template let-state="state" matMenuContent>
-        <button mat-menu-item *ngFor="let restriction of restrictions" (click)="onSetRestriction(restriction.key, state)">
+        <button
+            mat-menu-item
+            *ngFor="let restriction of restrictions"
+            (click)="onSetRestriction(restriction.key, state)"
+        >
             <mat-icon *ngIf="state.restriction.includes(restriction.key)">check</mat-icon>
             <span>{{ restriction.label | translate }}</span>
         </button>
diff --git a/client/src/app/site/motions/modules/statute-paragraph/components/statute-import-list/statute-import-list.component.html b/client/src/app/site/motions/modules/statute-paragraph/components/statute-import-list/statute-import-list.component.html
index 6b2076aea..29fc83015 100644
--- a/client/src/app/site/motions/modules/statute-paragraph/components/statute-import-list/statute-import-list.component.html
+++ b/client/src/app/site/motions/modules/statute-paragraph/components/statute-import-list/statute-import-list.component.html
@@ -97,7 +97,7 @@
         </mat-select>
     </div>
     <div class="table-container">
-        <table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
+        <table mat-table [dataSource]="dataSource" matSort>
             <!-- Status column -->
             <ng-container matColumnDef="status" sticky>
                 <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>
diff --git a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
index c273b4bbe..a59f0d197 100644
--- a/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
+++ b/client/src/app/site/motions/modules/statute-paragraph/components/statute-paragraph-list/statute-paragraph-list.component.html
@@ -83,36 +83,23 @@
                 <button
                     *ngIf="editId !== statuteParagraph.id"
                     mat-button
-                    class="on-transition-fade"
                     (click)="onEditButton(statuteParagraph)"
                     mat-icon-button
                 >
                     <mat-icon>edit</mat-icon>
                 </button>
-                <button
-                    *ngIf="editId === statuteParagraph.id"
-                    mat-button
-                    class="on-transition-fade"
-                    (click)="onCancelUpdate()"
-                    mat-icon-button
-                >
+                <button *ngIf="editId === statuteParagraph.id" mat-button (click)="onCancelUpdate()" mat-icon-button>
                     <mat-icon>close</mat-icon>
                 </button>
                 <button
                     *ngIf="editId === statuteParagraph.id"
                     mat-button
-                    class="on-transition-fade"
                     (click)="onSaveButton(statuteParagraph)"
                     mat-icon-button
                 >
                     <mat-icon>save</mat-icon>
                 </button>
-                <button
-                    mat-button
-                    class="on-transition-fade"
-                    (click)="onDeleteButton(statuteParagraph)"
-                    mat-icon-button
-                >
+                <button mat-button (click)="onDeleteButton(statuteParagraph)" mat-icon-button>
                     <mat-icon>delete</mat-icon>
                 </button>
             </mat-action-row>
diff --git a/client/src/app/site/tags/components/tag-list/tag-list.component.html b/client/src/app/site/tags/components/tag-list/tag-list.component.html
index 404dd35fa..ecda87eac 100644
--- a/client/src/app/site/tags/components/tag-list/tag-list.component.html
+++ b/client/src/app/site/tags/components/tag-list/tag-list.component.html
@@ -25,7 +25,7 @@
     </div>
 
     <!-- remove button -->
-    <div class="extra-controls-slot on-transition-fade">
+    <div class="extra-controls-slot">
         <button type="button" mat-button *ngIf="!isMultiSelect && editTag && !newTag" (click)="deleteSelectedTag()">
             <mat-icon>delete</mat-icon>
             <span translate>Delete</span>
diff --git a/client/src/app/site/users/components/group-list/group-list.component.html b/client/src/app/site/users/components/group-list/group-list.component.html
index 555d0e71e..c8006d9ce 100644
--- a/client/src/app/site/users/components/group-list/group-list.component.html
+++ b/client/src/app/site/users/components/group-list/group-list.component.html
@@ -1,17 +1,16 @@
-<os-head-bar [mainButton]="true" [nav]="false"
-    (mainEvent)="setEditMode(!editGroup)">
+<os-head-bar [mainButton]="true" [nav]="false" (mainEvent)="setEditMode(!editGroup)">
     <!-- Title -->
     <div class="title-slot">
         <h2 translate>Groups</h2>
     </div>
 </os-head-bar>
 
-<div class="hint-text on-transition-fade">
+<div class="hint-text">
     <span translate>All your changes are saved immediately.</span>
 </div>
 
 <mat-accordion *ngFor="let app of appPermissions">
-    <mat-expansion-panel class="mat-elevation-z0" [expanded]=true>
+    <mat-expansion-panel class="mat-elevation-z0" [expanded]="true">
         <mat-expansion-panel-header>
             <mat-panel-title>
                 {{ app.name | translate }}
@@ -19,7 +18,7 @@
         </mat-expansion-panel-header>
 
         <div class="scrollable-perm-matrix">
-            <table mat-table class="on-transition-fade" [dataSource]="getTableDataSource(app.permissions)">
+            <table mat-table [dataSource]="getTableDataSource(app.permissions)">
                 <ng-container matColumnDef="perm" sticky>
                     <mat-header-cell *matHeaderCellDef translate>Permissions</mat-header-cell>
                     <mat-cell *matCellDef="let perm">
@@ -36,8 +35,11 @@
                         </mat-header-cell>
                         <mat-cell *matCellDef="let perm">
                             <div class="inner-table">
-                                <mat-checkbox *ngIf="group.id !== 2" [checked]="group.hasPermission(perm.value)"
-                                    (change)="togglePerm(group, perm.value)"></mat-checkbox>
+                                <mat-checkbox
+                                    *ngIf="group.id !== 2"
+                                    [checked]="group.hasPermission(perm.value)"
+                                    (change)="togglePerm(group, perm.value)"
+                                ></mat-checkbox>
                                 <mat-checkbox *ngIf="group.id === 2" [checked]="true" [disabled]="true"></mat-checkbox>
                             </div>
                         </mat-cell>
@@ -58,8 +60,14 @@
     <div class="os-form-card-mobile" mat-dialog-content>
         <form class="edit-form" [formGroup]="groupForm" (keydown)="keyDownFunction($event)">
             <mat-form-field>
-                <input type="text" matInput osAutofocus required formControlName="name"
-                    placeholder="{{ 'New group name' | translate}}">
+                <input
+                    type="text"
+                    matInput
+                    osAutofocus
+                    required
+                    formControlName="name"
+                    placeholder="{{ 'New group name' | translate }}"
+                />
                 <mat-error *ngIf="groupForm.invalid" translate>Required</mat-error>
             </mat-form-field>
         </form>
diff --git a/client/src/app/site/users/components/user-import/user-import-list.component.html b/client/src/app/site/users/components/user-import/user-import-list.component.html
index 24625ff8d..fc13649cc 100644
--- a/client/src/app/site/users/components/user-import/user-import-list.component.html
+++ b/client/src/app/site/users/components/user-import/user-import-list.component.html
@@ -81,7 +81,7 @@
                 </mat-form-field>
                 <mat-form-field>
                     <mat-label translate>Text separator</mat-label>
-                    <mat-select class="selection" (selectionChange)="selectTextSep($event)" value="&quot;">
+                    <mat-select class="selection" (selectionChange)="selectTextSep($event)" value='"'>
                         <mat-option *ngFor="let option of textSeparators" [value]="option.value">
                             {{ option.label | translate }}
                         </mat-option>
@@ -143,7 +143,7 @@
         <mat-option value="noerror" translate>Show correct entries only</mat-option>
     </mat-select>
     <div class="table-container">
-        <table mat-table class="on-transition-fade" [dataSource]="dataSource" matSort>
+        <table mat-table [dataSource]="dataSource" matSort>
             <!-- Status column -->
             <ng-container matColumnDef="status" sticky>
                 <mat-header-cell *matHeaderCellDef class="first-column"></mat-header-cell>
diff --git a/client/src/styles.scss b/client/src/styles.scss
index dd6e2fdfc..59a680e62 100644
--- a/client/src/styles.scss
+++ b/client/src/styles.scss
@@ -461,11 +461,6 @@ mat-paginator {
     flex: 1 1 auto;
 }
 
-/** helper classes for animation */
-.on-transition-fade {
-    z-index: 100;
-}
-
 mat-expansion-panel {
     border-radius: 0 !important;
 }