nanakura/moeka-project
1
0
Fork 0
Code Issues Pull Requests 1 Actions 1 Packages Projects Releases Wiki Activity

style(stage-web): new transitions

Browse Source 
Signed-off-by: Neko Ayaka <neko@ayaka.moe>
This commit is contained in:
Neko Ayaka
2025-03-06 21:52:38 +08:00
parent d540c05f4d
commit d62bb4192c
18 changed files with 160 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-transitions/src/components/ArrowTransition.vue
+2 -1
View File
@@ -5,6 +5,7 @@ const props = withDefaults(defineProps<{
stageTransition?: {
primaryColor?: string
secondaryColor?: string
zIndex?: number
}
}>(), {
stageTransition: () => ({
@@ -24,7 +25,7 @@ onMounted(() => {
</script>
<template>
<div class="stage-transition-3" />
<div class="stage-transition-3" :style="{ zIndex: stageTransition.zIndex || 100 }" />
</template>
<style scoped>
packages/ui-transitions/src/components/BubbleWaveOutTransition.vue
+2 -1
View File
@@ -6,6 +6,7 @@ const props = defineProps<{
colors?: string[]
delay?: number
duration?: number
zIndex?: number
}
}>()
@@ -21,7 +22,7 @@ onMounted(() => {
</script>
<template>
<div class="circle-expansion-transition">
<div class="circle-expansion-transition" :style="{ zIndex: stageTransition.zIndex || 100 }">
<div v-for="(_, index) in colors" :key="index" />
</div>
</template>
packages/ui-transitions/src/components/FantasyFallTransition.vue
+2 -1
View File
@@ -12,6 +12,7 @@ const props = defineProps <{
md?: string
lg?: string
}
zIndex?: number
}
}>()
@@ -29,7 +30,7 @@ onMounted(() => {
</script>
<template>
<div class="fantasy-fall-transition" :class="directionClass" />
<div class="fantasy-fall-transition" :class="directionClass" :style="{ zIndex: stageTransition.zIndex || 100 }" />
</template>
<style scoped>
packages/ui-transitions/src/components/MultipleBlocksRevealTransition.vue
+4 -8
View File
@@ -1,17 +1,13 @@
<script setup lang="ts">
import { computed, onMounted } from 'vue'
const props = withDefaults(defineProps<{
const props = defineProps<{
stageTransition?: {
primaryColor?: string
secondaryColor?: string
zIndex?: number
}
}>(), {
stageTransition: () => ({
primaryColor: '#666',
secondaryColor: '#ccc',
}),
})
}>()
const stageTransition = computed(() => props.stageTransition)
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
@@ -24,7 +20,7 @@ onMounted(() => {
</script>
<template>
<div class="stage-transition-4">
<div class="stage-transition-4" :style="{ zIndex: stageTransition.zIndex || 100 }">
<div class="stage-transition-4__block" />
<div class="stage-transition-4__block" />
<div class="stage-transition-4__block" />
packages/ui-transitions/src/components/RectanglesRotateTransition.vue
+2 -1
View File
@@ -10,6 +10,7 @@ const props = defineProps<{
delay?: number
rotation?: number
staggerDelay?: number
zIndex?: number
}
}>()
@@ -26,7 +27,7 @@ onMounted(() => {
</script>
<template>
<div class="rectangle-rotate-transition">
<div class="rectangle-rotate-transition" :style="{ zIndex: stageTransition.zIndex || 100 }">
<!-- First rectangle (top-left) -->
<div class="rectangle rectangle-rotate-1">
<div />
packages/ui-transitions/src/components/SlideTransition.vue
+10 -9
View File
@@ -1,22 +1,23 @@
<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { computed, onMounted, watch } from 'vue'
const props = withDefaults(defineProps<{
const props = defineProps<{
stageTransition?: {
primaryColor?: string
secondaryColor?: string
zIndex?: number
}
}>(), {
stageTransition: () => ({
primaryColor: '#666',
secondaryColor: '#ccc',
}),
})
}>()
const stageTransition = computed(() => props.stageTransition)
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
const overlayColor2 = computed(() => stageTransition.value.secondaryColor || '#ccc')
watch([stageTransition, overlayColor1, overlayColor2], () => {
document.documentElement.style.setProperty('--stage-transition-1-overlay-color-1', overlayColor1.value)
document.documentElement.style.setProperty('--stage-transition-1-overlay-color-2', overlayColor2.value)
})
onMounted(() => {
document.documentElement.style.setProperty('--stage-transition-1-overlay-color-1', overlayColor1.value)
document.documentElement.style.setProperty('--stage-transition-1-overlay-color-2', overlayColor2.value)
@@ -24,7 +25,7 @@ onMounted(() => {
</script>
<template>
<div class="stage-transition-1" />
<div class="stage-transition-1" :style="{ zIndex: stageTransition.zIndex || 100 }" />
</template>
<style scoped>
packages/ui-transitions/src/components/SlopeSlideTransition.vue
+4 -8
View File
@@ -1,17 +1,13 @@
<script setup lang="ts">
import { computed, onMounted } from 'vue'
const props = withDefaults(defineProps<{
const props = defineProps<{
stageTransition?: {
primaryColor?: string
secondaryColor?: string
zIndex?: number
}
}>(), {
stageTransition: () => ({
primaryColor: '#666',
secondaryColor: '#ccc',
}),
})
}>()
const stageTransition = computed(() => props.stageTransition)
const overlayColor1 = computed(() => stageTransition.value.primaryColor || '#666')
@@ -24,7 +20,7 @@ onMounted(() => {
</script>
<template>
<div class="stage-transition-2" />
<div class="stage-transition-2" :style="{ zIndex: stageTransition.zIndex || 100 }" />
</template>
<style scoped>
packages/ui-transitions/src/components/StageTransitionGroup.vue
+15
View File
@@ -13,13 +13,19 @@ import SlopeSlideTransition from './SlopeSlideTransition.vue'
const props = defineProps<{
primaryColor?: string
secondaryColor?: string
tertiaryColor?: string
colors?: string[]
zIndex?: number
}>()
interface StageTransitionCommonParams {
name: string
primaryColor?: string
secondaryColor?: string
tertiaryColor?: string
direction?: 'top' | 'bottom' | 'left' | 'right'
colors?: string[]
zIndex?: number
}
type TransitionComponent =
@@ -252,6 +258,15 @@ router.beforeEach((to, _from, next) => {
if (typeof props.secondaryColor !== 'undefined') {
stageTransition.secondaryColor = props.secondaryColor
}
if (typeof props.tertiaryColor !== 'undefined') {
stageTransition.tertiaryColor = props.tertiaryColor
}
if (typeof props.colors !== 'undefined') {
stageTransition.colors = props.colors
}
if (typeof props.zIndex !== 'undefined') {
stageTransition.zIndex = props.zIndex
}
triggerTransition(stageTransition, next)
})