61 lines
1.0 KiB
Plaintext
61 lines
1.0 KiB
Plaintext
// 简化版页面过渡动画
|
||
.simple-page-transition {
|
||
// 默认不播放动画，只有带animate类时才播放
|
||
&.animate {
|
||
animation: pageEnter 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||
will-change: opacity, transform;
|
||
}
|
||
}
|
||
|
||
@keyframes pageEnter {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px) scale(0.96);
|
||
filter: blur(4px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0) scale(1);
|
||
filter: blur(0);
|
||
}
|
||
}
|
||
|
||
// 复杂版页面过渡动画
|
||
.page-transition {
|
||
position: relative;
|
||
height: 100%;
|
||
|
||
.transition-content {
|
||
height: 100%;
|
||
|
||
&.fadeIn {
|
||
animation: fadeIn 0.3s ease-in-out forwards;
|
||
}
|
||
|
||
&.fadeOut {
|
||
animation: fadeOut 0.3s ease-in-out forwards;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(20px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes fadeOut {
|
||
from {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
to {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
} |