feat: add pages animation

src/app/components/room-view/room-view-animation.ts

@@ -0,0 +1,20 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+
+export const roomViewAnimation = trigger('roomViewAnimation', [
+  transition(':enter', [
+    style({
+      opacity: 0
+    }),
+    animate(200, style({
+      opacity: 1
+    }))
+  ]),
+  transition(':leave', [
+    style({
+      opacity: 1
+    }),
+    animate(200, style({
+      opacity: 0
+    }))
+  ]),
+]);

src/app/components/room-view/room-view.component.css

@@ -6,6 +6,7 @@
   padding: 15px 0;
   background-color: #2e2b36;
   border-bottom: 1px solid #63606b;
+  position: relative;
 }
 .room-name__container {
   display: flex;

src/app/components/room-view/room-view.component.html

@@ -1,4 +1,4 @@
-<div class="room-container">
+<div class="room-container" @roomViewAnimation>
   <div class="room-name__container">
      <div class="room-img__wrap">
       <img [src]="room.image" alt="Room Image" class="room-img">

src/app/components/room-view/room-view.component.ts

@@ -4,11 +4,13 @@ import { RoomIdService } from './room-id.service';
 import { Router } from '@angular/router';
 import { Room } from './../../models/room';
 import { Component, Input, OnInit } from '@angular/core';
+import { roomViewAnimation } from './room-view-animation';
 
 @Component({
   selector: 'app-room-view',
   templateUrl: './room-view.component.html',
-  styleUrls: ['./room-view.component.css']
+  styleUrls: ['./room-view.component.css'],
+  animations: [roomViewAnimation]
 })
 export class RoomViewComponent implements OnInit {
 

src/app/pages/create-page/create-page-animation.ts

@@ -0,0 +1,35 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+
+export const createPageAnimation = trigger('createPageAnimation', [
+  transition(':enter', [
+    style({
+      opacity: 0
+    }),
+    animate(500, style({
+      opacity: 1
+    }))
+  ]),
+]);
+
+export const passContainer = trigger('passContainer', [
+  transition(':enter', [
+    style({
+      height: '20px',
+      opacity: 0
+    }),
+    animate(200, style({
+      height: '*',
+      opacity: 1
+    }))
+  ]),
+  transition(':leave', [
+    style({
+      height: '*',
+      opacity: 1
+    }),
+    animate(200, style({
+      height: 0,
+      opacity: 0
+    }))
+  ])
+])

src/app/pages/create-page/create-page.component.html

@@ -1,5 +1,5 @@
 <ng-template dynamicChildLoader=""></ng-template>
-<div class="create-wrap">
+<div class="create-wrap" @createPageAnimation>
   <div class="logo-wrap">
     <app-logo></app-logo>
   </div>
@@ -39,7 +39,7 @@
           </div>
           <span class="setting-title">Сделать игру приватной</span>
         </div>
-        <div class="setting-container" *ngIf="privateMode">
+        <div class="setting-container" *ngIf="privateMode" @passContainer>
           <label class="setting-title" for="pass">Пароль к игре</label>
           <input type="text" id="pass" class="input-setting-text" placeholder="Введите пароль к игре" maxlength="4"
             formControlName="pass">

src/app/pages/create-page/create-page.component.ts

@@ -7,11 +7,13 @@ import { DynamicChildLoaderDirective } from 'src/app/directives/dynamic-child-lo
 import { Room } from 'src/app/models/room';
 import { User, RoomUser } from 'src/app/models/user';
 import { RoomsService } from 'src/app/services/rooms.service';
+import { createPageAnimation, passContainer } from './create-page-animation';
 
 @Component({
   selector: 'app-create-page',
   templateUrl: './create-page.component.html',
-  styleUrls: ['./create-page.component.css']
+  styleUrls: ['./create-page.component.css'],
+  animations: [createPageAnimation, passContainer]
 })
 export class CreatePageComponent implements OnInit {
 
@@ -47,10 +49,10 @@ export class CreatePageComponent implements OnInit {
       this.room.users = [this.admin];
       this.room.image = this.admin.image || '';
       this.room.admin = this.admin._id!
-      this.roomService.createRoom(this.room).subscribe(response => { 
-        this.room._id = response._id; this.router.navigateByUrl(`/room/${this.room._id}`) 
+      this.roomService.createRoom(this.room).subscribe(response => {
+        this.room._id = response._id; this.router.navigateByUrl(`/room/${this.room._id}`)
         this.roomIdService._id = this.room._id!
-    });
+      });
     } else {
       this.showModal();
     }

src/app/pages/join-page/join-page-animation.ts

@@ -0,0 +1,12 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+
+export const joinPageAnimation = trigger('joinPageAnimation', [
+  transition(':enter', [
+    style({
+      opacity: 0
+    }),
+    animate(500, style({
+      opacity: 1
+    }))
+  ]),
+]);

src/app/pages/join-page/join-page.component.css

@@ -19,7 +19,7 @@
   height: 467px;
   border: 1px solid #767185;
   border-radius: 24px;
-
+  overflow: hidden;
 }
 
 .rooms-title-wrap {

src/app/pages/join-page/join-page.component.html

@@ -1,4 +1,4 @@
-<div class="join-wrap">
+<div class="join-wrap" @joinPageAnimation>
   <div class="logo-wrap">
     <app-logo></app-logo>
   </div>

src/app/pages/join-page/join-page.component.ts

@@ -1,10 +1,12 @@
 import { RoomsService } from './../../services/rooms.service';
 import { Component, OnInit } from '@angular/core';
+import { joinPageAnimation } from './join-page-animation';
 
 @Component({
   selector: 'app-join-page',
   templateUrl: './join-page.component.html',
-  styleUrls: ['./join-page.component.css']
+  styleUrls: ['./join-page.component.css'],
+  animations: [joinPageAnimation]
 })
 export class JoinPageComponent implements OnInit {
   page: number = 1;

src/app/pages/main-page/main-page-animation.ts

@@ -0,0 +1,12 @@
+import { animate, style, transition, trigger } from '@angular/animations';
+
+export const mainPageAnimation = trigger('mainPageAnimation', [
+  transition(':enter', [
+    style({
+      opacity: 0
+    }),
+    animate(1000, style({
+      opacity: 1
+    }))
+  ]),
+]);

src/app/pages/main-page/main-page.component.html

@@ -1,4 +1,4 @@
-<div class="main-page__container">
+<div class="main-page__container" @mainPageAnimation>
   <div class="main-companent__wrap">
     <div class="meme-wrap">
       <div class="meme-title ">

src/app/pages/main-page/main-page.component.ts

@@ -1,9 +1,11 @@
 import { Component, OnInit } from '@angular/core';
+import { mainPageAnimation } from './main-page-animation';
 
 @Component({
   selector: 'app-main-page',
   templateUrl: './main-page.component.html',
-  styleUrls: ['./main-page.component.css']
+  styleUrls: ['./main-page.component.css'],
+  animations: [mainPageAnimation]
 })
 export class MainPageComponent implements OnInit {