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

feat: add animations to Playground elements

Browse Source
This commit is contained in:
Settel 2022-09-16 22:41:08 +02:00
parent 93a71bfbd3
commit 1e261eb3ec
2 changed files with 9 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/components/Playground.vue
View File

@ -72,16 +72,11 @@ const disabledMap = computed(() => {
}) })
const showMap = ref({} as { [key: string]: boolean}) const showMap = ref({} as { [key: string]: boolean})
window.setTimeout(() => { sources.forEach((source, index) => {
for (const source of sources) { window.setTimeout(() => {
showMap.value[source.id] = true showMap.value[source.id] = true
} }, 1000 + index * 250)
}, 1000) })
window.setTimeout(() => {
for (const source of sources) {
showMap.value[source.id] = false
}
}, 3000)
</script> </script>
<style lang="scss"> <style lang="scss">

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

@ -32,7 +32,7 @@ const containerClasses = computed(() => {
'source-card__container__selectable': props.selectable, 'source-card__container__selectable': props.selectable,
'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 && props.show,
} }
}) })
</script> </script>
@ -53,15 +53,16 @@ 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;
opacity: 0; opacity: 0;
position: relative; position: relative;
top: -40px; top: -40px;
transition: opacity 1s linear, top 1s cubic-bezier(0.2, 2, 0.7, 1.5); transition: opacity 1s linear, top 999s;
&__show { &__show {
opacity: 100%; opacity: 100%;
top: 0; top: 0;
transition: opacity 1s linear, top 1s cubic-bezier(0.2, 2, 0.7, 1.5);
} }
&__selectable { &__selectable {