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})
window.setTimeout(() => {
for (const source of sources) {
sources.forEach((source, index) => {
window.setTimeout(() => {
showMap.value[source.id] = true
}
}, 1000)
window.setTimeout(() => {
for (const source of sources) {
showMap.value[source.id] = false
}
}, 3000)
}, 1000 + index * 250)
})
</script>
<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__selected': props.selected,
'source-card__container__showBadge': props.badge,
'source-card__container__disabled': props.disabled,
'source-card__container__disabled': props.disabled && props.show,
}
})
</script>
@ -53,15 +53,16 @@ const containerClasses = computed(() => {
background-color: $sourcecard-background-color;
color: $sourcecard-text-color;
cursor: not-allowed;
opacity: 0;
position: relative;
top: -40px;
transition: opacity 1s linear, top 1s cubic-bezier(0.2, 2, 0.7, 1.5);
transition: opacity 1s linear, top 999s;
&__show {
opacity: 100%;
top: 0;
transition: opacity 1s linear, top 1s cubic-bezier(0.2, 2, 0.7, 1.5);
}
&__selectable {