jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2024-11-30 17:51:14 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(JTransition): share classes, use will-change

Browse Source 
Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
This commit is contained in:
Fernando Fernández 2024-04-16 00:36:06 +02:00
parent 8fbc3addde
commit 963f41bf13
No known key found for this signature in database
GPG Key ID: 82FD36644F1F4D3B
1 changed files with 12 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/components/lib/JTransition.vue
View File

@ -60,6 +60,7 @@ function getComponent(): VueComponent {
.j-transition-fade-enter-active,
.j-transition-fade-leave-active {
transition-property: opacity !important;
will-change: opacity !important;
}
/** rotated-zoom */
@ -71,6 +72,17 @@ function getComponent(): VueComponent {
.j-transition-rotated-zoom-enter-active,
.j-transition-rotated-zoom-leave-active {
transition-property: transform !important;
will-change: transform !important;
}
/** slide-* common classes */
.j-transition-slide-x-reverse-enter-active,
.j-transition-slide-x-reverse-leave-active,
.j-transition-slide-y-reverse-enter-active,
.j-transition-slide-y-reverse-leave-active,
.j-transition-slide-x-enter-active,
.j-transition-slide-x-leave-active {
transition-property: transform, opacity !important;
}
/** slide-y-reverse */
@ -80,11 +92,6 @@ function getComponent(): VueComponent {
transform: translateY(15px);
}
.j-transition-slide-y-reverse-enter-active,
.j-transition-slide-y-reverse-leave-active {
transition-property: transform, opacity !important;
}
/** slide-x-reverse */
.j-transition-slide-x-reverse-enter-from,
.j-transition-slide-x-reverse-leave-to {
@ -92,19 +99,10 @@ function getComponent(): VueComponent {
transform: translateX(15px);
}
.j-transition-slide-x-reverse-enter-active,
.j-transition-slide-x-reverse-leave-active {
transition-property: transform, opacity !important;
}
/** slide-x */
.j-transition-slide-x-enter-from,
.j-transition-slide-x-leave-to {
opacity: 0;
transform: translateX(-15px);
}
.j-transition-slide-x-enter-active,
.j-transition-slide-x-leave-active {
transition-property: transform, opacity !important;
}
</style>