settel/knowyt
1
0
Fork 0
Code Issues Pull Requests Packages Releases Activity

feat: animate source cards on show

Browse Source
This commit is contained in:
Settel 2022-09-13 12:23:19 +02:00
parent cd475288f6
commit 10a3ab01da
1 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/components/SourceCard.vue
View File

@ -29,6 +29,7 @@ const containerClasses = computed(() => {
'source-card__container__selected': props.selected, 'source-card__container__selected': props.selected,
'source-card__container__showBadge': props.badge, 'source-card__container__showBadge': props.badge,
'source-card__container__disabled': props.disabled, 'source-card__container__disabled': props.disabled,
[`source-card__container__index_${props.index}`]: true,
} }
}) })
</script> </script>
@ -49,7 +50,10 @@ const containerClasses = computed(() => {
background-color: $sourcecard-background-color; background-color: $sourcecard-background-color;
color: $sourcecard-text-color; color: $sourcecard-text-color;
cursor: not-allowed; cursor: not-allowed;
animation: source-show 1s ease-out; opacity: 0;
animation-name: source-show;
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.2, 2, 0.7, 1.5);
animation-fill-mode: forwards; animation-fill-mode: forwards;
&__selectable { &__selectable {
@ -74,6 +78,17 @@ const containerClasses = computed(() => {
animation: source-fade-out 0.7s linear; animation: source-fade-out 0.7s linear;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
&__index_0 { animation-delay: 0.0s; }
&__index_1 { animation-delay: 0.5s; }
&__index_2 { animation-delay: 1.0s; }
&__index_3 { animation-delay: 1.5s; }
&__index_4 { animation-delay: 2.0s; }
&__index_5 { animation-delay: 2.5s; }
&__index_6 { animation-delay: 3.0s; }
&__index_7 { animation-delay: 3.5s; }
&__index_8 { animation-delay: 4.0s; }
&__index_9 { animation-delay: 4.5s; }
} }
&__badge-container { &__badge-container {
@ -106,12 +121,12 @@ const containerClasses = computed(() => {
@keyframes source-show { @keyframes source-show {
from { from {
position: relative; position: relative;
left: -40px; top: -40px;
opacity: 0%; opacity: 5%;
} }
to { to {
position: relative; position: relative;
left: 0; top: 0;
opacity: 100%; opacity: 100%;
} }
} }