Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

fix: make screen switching animation feel smoother

Browse source
This commit is contained in:
IEduStu 2024-04-20 01:40:22 +00:00 committed by Timothy Z.
parent 89b6526555
commit 85407cfd3e
2 changed files with 37 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
src/common/animations.less
View file

@ -6,13 +6,29 @@
}
animation-timing-function: ease-in-out;
animation-duration: 100ms;
animation-duration: 350ms;
@media (prefers-reduced-motion) {
:local {
animation-name: fade-in-no-motion;
}
}
}
@keyframes fade-in {
0% {
opacity: 0;
transform: translateY(4px);
}
40% {
opacity: 0;
transform: translateY(4px);
}
70% {
opacity: 0.6;
transform: translateY(0.2vh);
transform: translateY(2px);
}
100% {
@ -51,4 +67,22 @@
.slide-left-exit {
transform: translateX(100%);
}
@keyframes fade-in-no-motion {
0% {
opacity: 0;
}
40% {
opacity: 0;
}
70% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}

2
src/routes/MetaDetails/MetaDetails.js
View file

@ -143,7 +143,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
:
<React.Fragment>
<MetaPreview
className={classnames(styles['meta-preview'], 'animation-fade-in')}
className={classnames(styles['meta-preview'])}
name={metaDetails.metaItem.content.content.name}
logo={metaDetails.metaItem.content.content.logo}
runtime={metaDetails.metaItem.content.content.runtime}