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

fix(ui-transitions): bad impl

Browse Source 
Signed-off-by: Neko Ayaka <neko@ayaka.moe>
This commit is contained in:
Neko Ayaka
2025-03-06 18:32:49 +08:00
parent bfd6f297cc
commit da610148e3
2 changed files with 164 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/ui-transitions/playground/src/pages/transition-5.vue
+1
View File
@@ -7,6 +7,7 @@ definePage({
meta: {
stageTransition: {
name: 'fantasy-fall',
direction: 'down',
},
},
})
packages/ui-transitions/src/components/FantasyFallTransition.vue
+163 -29
View File
@@ -1,18 +1,22 @@
<script setup lang="ts">
import { onMounted } from 'vue'
import { computed, onMounted } from 'vue'
const props = defineProps <{
stageTransition?: {
primaryColor?: string
duration?: number
delay?: number
direction?: 'up' | 'down' | 'left' | 'right'
borderRadius?: {
sm?: string
md?: string
lg?: string
}
}
}> ()
}>()
const direction = computed(() => props.stageTransition.direction || 'up')
const directionClass = computed(() => `fantasy-fall-${direction.value}`)
onMounted(() => {
document.documentElement.style.setProperty('--fantasy-fall-color', props.stageTransition.primaryColor || '#eee')
@@ -25,7 +29,7 @@ onMounted(() => {
</script>
<template>
<div class="fantasy-fall-transition" />
<div class="fantasy-fall-transition" :class="directionClass" />
</template>
<style scoped>
@@ -33,24 +37,121 @@ onMounted(() => {
position: absolute;
inset: 0;
overflow: hidden;
}
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--fantasy-fall-color);
transform: translateY(-100%);
border-bottom-left-radius: var(--fantasy-fall-radius-sm);
border-bottom-right-radius: var(--fantasy-fall-radius-sm);
animation: fantasy-fall var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
/* Top direction (default) */
.fantasy-fall-up::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--fantasy-fall-color);
transform: translateY(-100%);
border-bottom-left-radius: var(--fantasy-fall-radius-sm);
border-bottom-right-radius: var(--fantasy-fall-radius-sm);
animation: fantasy-fall-up var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
}
/* Bottom direction */
.fantasy-fall-down::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--fantasy-fall-color);
transform: translateY(100%);
border-top-left-radius: var(--fantasy-fall-radius-sm);
border-top-right-radius: var(--fantasy-fall-radius-sm);
animation: fantasy-fall-down var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
}
/* Left direction */
.fantasy-fall-left::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--fantasy-fall-color);
transform: translateX(-100%);
border-top-right-radius: var(--fantasy-fall-radius-sm);
border-bottom-right-radius: var(--fantasy-fall-radius-sm);
animation: fantasy-fall-left var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
}
/* Right direction */
.fantasy-fall-right::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--fantasy-fall-color);
transform: translateX(100%);
border-top-left-radius: var(--fantasy-fall-radius-sm);
border-bottom-left-radius: var(--fantasy-fall-radius-sm);
animation: fantasy-fall-right var(--fantasy-fall-duration) ease-out var(--fantasy-fall-delay) forwards;
}
/* Responsive border radius adjustments */
@media (min-width: 768px) {
.fantasy-fall-up::before {
border-bottom-left-radius: var(--fantasy-fall-radius-md);
border-bottom-right-radius: var(--fantasy-fall-radius-md);
}
.fantasy-fall-down::before {
border-top-left-radius: var(--fantasy-fall-radius-md);
border-top-right-radius: var(--fantasy-fall-radius-md);
}
.fantasy-fall-left::before {
border-top-right-radius: var(--fantasy-fall-radius-md);
border-bottom-right-radius: var(--fantasy-fall-radius-md);
}
.fantasy-fall-right::before {
border-top-left-radius: var(--fantasy-fall-radius-md);
border-bottom-left-radius: var(--fantasy-fall-radius-md);
}
}
@keyframes fantasy-fall {
@media (min-width: 1024px) {
.fantasy-fall-up::before {
border-bottom-left-radius: var(--fantasy-fall-radius-lg);
border-bottom-right-radius: var(--fantasy-fall-radius-lg);
}
.fantasy-fall-down::before {
border-top-left-radius: var(--fantasy-fall-radius-lg);
border-top-right-radius: var(--fantasy-fall-radius-lg);
}
.fantasy-fall-left::before {
border-top-right-radius: var(--fantasy-fall-radius-lg);
border-bottom-right-radius: var(--fantasy-fall-radius-lg);
}
.fantasy-fall-right::before {
border-top-left-radius: var(--fantasy-fall-radius-lg);
border-bottom-left-radius: var(--fantasy-fall-radius-lg);
}
}
</style>
<style>
/* Top direction animation */
@keyframes fantasy-fall-up {
0% {
transform: translateY(-100%);
}
@@ -66,21 +167,54 @@ onMounted(() => {
}
}
@media (min-width: 768px) {
.fantasy-fall-transition {
&::before {
border-bottom-left-radius: var(--fantasy-fall-radius-md);
border-bottom-right-radius: var(--fantasy-fall-radius-md);
}
/* Bottom direction animation */
@keyframes fantasy-fall-down {
0% {
transform: translateY(100%);
}
50% {
transform: translateY(0%);
}
100% {
transform: translateY(0%);
border-top-right-radius: 0%;
border-top-left-radius: 0%;
}
}
@media (min-width: 1024px) {
.fantasy-fall-transition {
&::before {
border-bottom-left-radius: var(--fantasy-fall-radius-lg);
border-bottom-right-radius: var(--fantasy-fall-radius-lg);
}
/* Left direction animation */
@keyframes fantasy-fall-left {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0%);
}
100% {
transform: translateX(0%);
border-top-right-radius: 0%;
border-bottom-right-radius: 0%;
}
}
/* Right direction animation */
@keyframes fantasy-fall-right {
0% {
transform: translateX(100%);
}
50% {
transform: translateX(0%);
}
100% {
transform: translateX(0%);
border-top-left-radius: 0%;
border-bottom-left-radius: 0%;
}
}
</style>