54 lines
849 B
CSS
54 lines
849 B
CSS
|
/* 过渡动画 */
|
||
|
|
.channel-content {
|
||
|
|
transition: opacity 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.channel-content.fade-out {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.channel-content.fade-in {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 滑动动画 */
|
||
|
|
.slide-left-enter {
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-left-enter-active {
|
||
|
|
transform: translateX(0);
|
||
|
|
transition: transform 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-right-enter {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-right-enter-active {
|
||
|
|
transform: translateX(0);
|
||
|
|
transition: transform 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-exit {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-exit-active {
|
||
|
|
transition: transform 0.3s ease-in-out;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-exit-left {
|
||
|
|
transform: translateX(-100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.slide-exit-right {
|
||
|
|
transform: translateX(100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 临时测试动画 */
|
||
|
|
.fade-out, .fade-in {
|
||
|
|
transition: opacity 1s ease !important;
|
||
|
|
}
|