feat: improve documentation

This commit is contained in:
thomas
2024-02-05 09:44:37 +01:00
parent c98aff0bae
commit 8d1a0bda25
5 changed files with 69 additions and 67 deletions

View File

@@ -15,12 +15,12 @@
"browser": "apps/angular/view-transition/src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "apps/angular/view-transition/tsconfig.app.json",
"inlineStyleLanguage": "css",
"inlineStyleLanguage": "scss",
"assets": [
"apps/angular/view-transition/src/favicon.ico",
"apps/angular/view-transition/src/assets"
],
"styles": ["apps/angular/view-transition/src/styles.css"],
"styles": ["apps/angular/view-transition/src/styles.scss"],
"scripts": []
},
"configurations": {

View File

@@ -1,55 +0,0 @@
@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;
}

View File

@@ -0,0 +1,4 @@
@tailwind base;
@tailwind components;
@tailwind utilities;