vcgit-forge/angular-challenges
1
0
Fork 0
mirror of https://github.com/Raghu-Ch/angular-challenges.git synced 2026-02-11 13:23:02 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: setup challenge 44

Browse Source
This commit is contained in:
thomas
2024-01-25 21:14:20 +01:00
parent c07954228f
commit e04ac11faf
25 changed files with 369 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
apps/angular/view-transition/src/app/app.component.ts Normal file
View File

@@ -0,0 +1,28 @@
import { Component } from '@angular/core';
import { RouterLink, RouterOutlet } from '@angular/router';
@Component({
standalone: true,
imports: [RouterLink, RouterOutlet],
selector: 'app-root',
template: `
<div class="flex gap-3">
<button
class="rounded-md border border-blue-500 bg-blue-200 px-4 py-2 text-xl"
routerLink="foo">
Foo
</button>
<button
class="rounded-md border border-blue-500 bg-blue-200 px-4 py-2 text-xl"
routerLink="bar">
Bar
</button>
</div>
<router-outlet />
`,
host: {
class: 'flex flex-col gap-10 border p-10 h-screen',
},
styles: [''],
})
export class AppComponent {}

14
apps/angular/view-transition/src/app/app.config.ts Normal file
View File

@@ -0,0 +1,14 @@
import { ApplicationConfig } from '@angular/core';
import { provideRouter, withViewTransitions } from '@angular/router';
export const appConfig: ApplicationConfig = {
providers: [
provideRouter(
[
{ path: 'bar', loadComponent: () => import('./bar.component') },
{ path: 'foo', loadComponent: () => import('./foo.component') },
],
withViewTransitions(),
),
],
};

13
apps/angular/view-transition/src/app/bar.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-bar',
standalone: true,
imports: [],
template: `
bar-component
`,
host: {
class: 'block h-full bg-green-500',
},
})
export default class BarComponent {}

20
apps/angular/view-transition/src/app/foo.component.ts Normal file
View File

@@ -0,0 +1,20 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-foo',
standalone: true,
imports: [],
template: `
<div class="count">app-foo</div>
`,
host: {
class: 'block h-full bg-red-500',
},
styles: `
.count {
view-transition-name: count;
width: fit-content
}
`,
})
export default class FooComponent {}

0
apps/angular/view-transition/src/assets/.gitkeep Normal file
View File

BIN
apps/angular/view-transition/src/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

13
apps/angular/view-transition/src/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>angular-view-transition</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root></app-root>
</body>
</html>

7
apps/angular/view-transition/src/main.ts Normal file
View File

@@ -0,0 +1,7 @@
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';
import { appConfig } from './app/app.config';
bootstrapApplication(AppComponent, appConfig).catch((err) =>
console.error(err),
);

54
apps/angular/view-transition/src/styles.scss Normal file
View File

@@ -0,0 +1,54 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@keyframes fade-in {
from {
opacity: 0;
}
}
@keyframes fade-out {
to {
opacity: 0;
}
}
@keyframes slide-from-right {
from {
transform: translateX(30px);
}
}
@keyframes slide-to-left {
to {
transform: translateX(-30px);
}
}
::view-transition-old(root) {
animation:
90ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}
::view-transition-new(root) {
animation:
210ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
::view-transition-new(count) {
animation: rotate 2s linear;
}
::view-transition-old(count) {
animation: rotate 0.5s linear;
}