tdesign-mobile-vue
Version:
tdesign-mobile-vue
52 lines (42 loc) • 1.17 kB
text/less
@import "../../../base.less";
// Mobile React: CSSTransition
.@{prefix}-overlay-fade-enter,
.@{prefix}-overlay-fade-appear {
opacity: 0;
animation-fill-mode: both;
animation-timing-function: linear;
animation-play-state: paused;
}
.@{prefix}-overlay-fade-exit {
animation-fill-mode: both;
animation-timing-function: linear;
animation-play-state: paused;
}
.@{prefix}-overlay-fade-enter.@{prefix}-overlay-fade-enter-active,
.@{prefix}-overlay-fade-enter.@{prefix}-overlay-fade-enter-active.@{prefix}-overlay-fade-enter-to,
.@{prefix}-overlay-fade-appear.@{prefix}-overlay-fade-appear-active,
.@{prefix}-overlay-fade-appear.@{prefix}-overlay-fade-appear-active.@{prefix}-overlay-fade-appear-to {
animation-name: tOverlayFadeIn;
animation-play-state: running;
}
.@{prefix}-overlay-fade-exit.@{prefix}-overlay-fade-exit-active,
.@{prefix}-overlay-fade-leave-active.@{prefix}-overlay-fade-leave-to {
animation-name: tOverlayFadeOut;
animation-play-state: running;
}
@keyframes tOverlayFadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes tOverlayFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}