386 lines
6.7 KiB
Text
386 lines
6.7 KiB
Text
/* 🎬 页面过渡组件样式 */
|
|
|
|
/* CSS变量定义 */
|
|
.page-transition-container {
|
|
--primary-color: #007AFF;
|
|
--background-color: #F2F2F7;
|
|
--surface-color: #FFFFFF;
|
|
--text-primary: #000000;
|
|
--text-secondary: #8E8E93;
|
|
--shadow-medium: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
|
--radius-large: 20rpx;
|
|
}
|
|
|
|
/* 🌙 深色模式支持 */
|
|
@media (prefers-color-scheme: dark) {
|
|
.page-transition-container {
|
|
--primary-color: #0A84FF;
|
|
--background-color: #000000;
|
|
--surface-color: #1C1C1E;
|
|
--text-primary: #FFFFFF;
|
|
--text-secondary: #8E8E93;
|
|
--shadow-medium: 0 8rpx 24rpx rgba(0, 0, 0, 0.4);
|
|
}
|
|
}
|
|
|
|
.page-transition-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 🎭 过渡类型样式 */
|
|
.page-transition-container.slide-left {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.page-transition-container.slide-right {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
.page-transition-container.slide-up {
|
|
transform: translateY(100%);
|
|
}
|
|
|
|
.page-transition-container.slide-down {
|
|
transform: translateY(-100%);
|
|
}
|
|
|
|
.page-transition-container.fade {
|
|
opacity: 0;
|
|
}
|
|
|
|
.page-transition-container.scale {
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
|
|
.page-transition-container.flip {
|
|
transform: rotateY(90deg);
|
|
}
|
|
|
|
.page-transition-container.zoom {
|
|
transform: scale(1.2);
|
|
opacity: 0;
|
|
}
|
|
|
|
/* 激活状态 */
|
|
.page-transition-container.active {
|
|
transform: translateX(0) translateY(0) scale(1) rotateY(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 🎨 过渡遮罩 */
|
|
.transition-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 1000;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.transition-overlay.fade-black {
|
|
background: rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.transition-overlay.fade-white {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
}
|
|
|
|
.transition-overlay.blur {
|
|
backdrop-filter: blur(10rpx);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
.transition-overlay.gradient {
|
|
background: linear-gradient(45deg,
|
|
rgba(0, 122, 255, 0.1) 0%,
|
|
rgba(90, 200, 250, 0.1) 100%);
|
|
}
|
|
|
|
/* 🔄 加载指示器 */
|
|
.transition-loading {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1001;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24rpx;
|
|
}
|
|
|
|
.loading-spinner {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
border: 4rpx solid rgba(0, 122, 255, 0.2);
|
|
border-top: 4rpx solid var(--primary-color);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 28rpx;
|
|
color: var(--text-secondary);
|
|
text-align: center;
|
|
}
|
|
|
|
/* 🎪 预定义动画类 */
|
|
@keyframes slideInLeft {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInRight {
|
|
from {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInUp {
|
|
from {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideInDown {
|
|
from {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes scaleIn {
|
|
from {
|
|
transform: scale(0.8);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes flipIn {
|
|
from {
|
|
transform: rotateY(90deg);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: rotateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes zoomIn {
|
|
from {
|
|
transform: scale(1.2);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes bounceIn {
|
|
0% {
|
|
transform: scale(0.3);
|
|
opacity: 0;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
opacity: 1;
|
|
}
|
|
70% {
|
|
transform: scale(0.95);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
@keyframes spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* 🎭 动画类应用 */
|
|
.page-transition-container.animate-slide-left {
|
|
animation: slideInLeft 0.4s ease-out;
|
|
}
|
|
|
|
.page-transition-container.animate-slide-right {
|
|
animation: slideInRight 0.4s ease-out;
|
|
}
|
|
|
|
.page-transition-container.animate-slide-up {
|
|
animation: slideInUp 0.4s ease-out;
|
|
}
|
|
|
|
.page-transition-container.animate-slide-down {
|
|
animation: slideInDown 0.4s ease-out;
|
|
}
|
|
|
|
.page-transition-container.animate-fade {
|
|
animation: fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.page-transition-container.animate-scale {
|
|
animation: scaleIn 0.3s ease-out;
|
|
}
|
|
|
|
.page-transition-container.animate-flip {
|
|
animation: flipIn 0.5s ease-out;
|
|
}
|
|
|
|
.page-transition-container.animate-zoom {
|
|
animation: zoomIn 0.3s ease-out;
|
|
}
|
|
|
|
.page-transition-container.animate-bounce {
|
|
animation: bounceIn 0.6s ease-out;
|
|
}
|
|
|
|
.loading-spinner {
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
/* 📱 响应式设计 */
|
|
@media screen and (max-width: 375px) {
|
|
.loading-spinner {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-width: 3rpx;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
@media screen and (min-width: 414px) {
|
|
.loading-spinner {
|
|
width: 70rpx;
|
|
height: 70rpx;
|
|
border-width: 5rpx;
|
|
}
|
|
|
|
.loading-text {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
/* 🎨 性能优化 */
|
|
.page-transition-container {
|
|
will-change: transform, opacity;
|
|
backface-visibility: hidden;
|
|
-webkit-backface-visibility: hidden;
|
|
}
|
|
|
|
/* 减少重绘 */
|
|
.page-transition-container .transition-content {
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
/* 硬件加速 */
|
|
.page-transition-container.hardware-accelerated {
|
|
transform: translateZ(0);
|
|
-webkit-transform: translateZ(0);
|
|
}
|
|
|
|
/* 🎭 特殊效果 */
|
|
.page-transition-container.glass-effect {
|
|
backdrop-filter: blur(20rpx);
|
|
background: rgba(255, 255, 255, 0.1);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.page-transition-container.shadow-effect {
|
|
box-shadow: var(--shadow-medium);
|
|
}
|
|
|
|
.page-transition-container.glow-effect {
|
|
box-shadow: 0 0 40rpx rgba(0, 122, 255, 0.3);
|
|
}
|
|
|
|
/* 🎪 组合动画 */
|
|
.page-transition-container.slide-fade {
|
|
animation: slideInLeft 0.4s ease-out, fadeIn 0.4s ease-out;
|
|
}
|
|
|
|
.page-transition-container.scale-fade {
|
|
animation: scaleIn 0.3s ease-out, fadeIn 0.3s ease-out;
|
|
}
|
|
|
|
.page-transition-container.flip-fade {
|
|
animation: flipIn 0.5s ease-out, fadeIn 0.5s ease-out;
|
|
}
|
|
|
|
/* 🎯 状态指示器 */
|
|
.page-transition-container.loading {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.page-transition-container.transitioning {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.page-transition-container.completed {
|
|
transform: none;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 🔧 调试模式 */
|
|
.page-transition-container.debug {
|
|
border: 2rpx dashed #ff0000;
|
|
position: relative;
|
|
}
|
|
|
|
.page-transition-container.debug::before {
|
|
content: 'TRANSITION DEBUG';
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 10rpx;
|
|
background: #ff0000;
|
|
color: white;
|
|
padding: 4rpx 8rpx;
|
|
font-size: 20rpx;
|
|
z-index: 9999;
|
|
}
|