add app open/close animations using RCSS

- app-opening: 0.2s quadratic-out scale from 0.9 to 1.0
- app-closing: 0.15s quadratic-in scale from 1.0 to 0.9
- Avoided back-out easing to prevent flickering
This commit is contained in:
2026-01-20 15:56:33 +01:00
parent 0b4931eaca
commit 4b47611902
2 changed files with 53 additions and 10 deletions

View File

@@ -60,9 +60,6 @@ function loadAppContent_internal(app_id, app_path, skip_animation)
-- Load app content using C++ function
if loadAppContent then
-- Hide container before loading to prevent flash
app_container:SetClass("app-hidden", true)
local success = loadAppContent(app_container, app_path)
showLoading(false)
@@ -71,8 +68,17 @@ function loadAppContent_internal(app_id, app_path, skip_animation)
current_app_path = app_path
print("[Shell] App loaded: " .. app_id)
-- Show container after content is loaded
app_container:SetClass("app-hidden", false)
-- Play opening animation (unless skipped for initial load)
if not skip_animation then
app_container:SetClass("app-closing", false)
app_container:SetClass("app-opening", true)
-- Remove animation class after it completes
if setTimeout then
setTimeout(function()
app_container:SetClass("app-opening", false)
end, 200)
end
end
-- If home was loaded, populate apps dynamically
if app_id == "home" then
@@ -132,10 +138,19 @@ end
-- ===== NAVIGATION =====
-- Execute callback for navigation (animations removed to fix flash)
-- Play closing animation then execute callback
local function playCloseAnimation(callback)
-- Just execute callback immediately - loadAppContent handles hiding
if callback then callback() end
if app_container and setTimeout then
app_container:SetClass("app-opening", false)
app_container:SetClass("app-closing", true)
-- Wait for animation to complete before loading new content
setTimeout(function()
if callback then callback() end
end, 150)
else
-- No animation support, execute immediately
if callback then callback() end
end
end
-- Go back to previous app

View File

@@ -51,9 +51,37 @@
background-color: #121212;
}
/* App visibility - simple hide/show without complex animations */
.app-hidden {
/* App open/close animations */
.app-opening {
animation: 0.2s quadratic-out app-open;
}
.app-closing {
animation: 0.15s quadratic-in app-close;
opacity: 0;
transform: scale(0.9);
}
@keyframes app-open {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1.0);
}
}
@keyframes app-close {
from {
opacity: 1;
transform: scale(1.0);
}
to {
opacity: 0;
transform: scale(0.9);
}
}
/* System navigation bar at bottom - always visible */