/* 简单做几种类型 */
/* 从左进入，从右进入，从上进入，从下进入，淡入 */
/* 使用sva类添加监听 */
.svg-left{
    opacity: 0;
    translate: -68.2% 0;
    transition: calc(var(--t)*1s) ease;
}
.svg-left.active{
    opacity: 1;
    translate: 0 0;
    transition: calc(var(--t)*1s) ease;
}
.svg-right{
    opacity: 0;
    translate: 68.2% 0;
    transform: inherit translateX(68.2%);
    transition: calc(var(--t)*1s) ease;
}
.svg-right.active{
    opacity: 1;
    translate: 0 0;
    transition: calc(var(--t)*1s) ease;
}
.svg-down{
    opacity: 0;
    translate: 0 100px;
    transition: calc(var(--t)*1s) ease;
}
.svg-down.active{
    opacity: 1;
    translate: 0 0;
    transition: calc(var(--t)*1s) ease;
}
.svg-up{
    opacity: 0;
    translate: 0 -100px;
    transition: calc(var(--t)*1s) ease;
}
.svg-up.active{
    opacity: 1;
    translate: 0 0;
    transition: calc(var(--t)*1s) ease;
}
.svg-fadin{
    opacity: 0;
    transition: calc(var(--t)*1s);
}
.svg-fadin.active{
    opacity: 1;
    transition: calc(var(--t)*1s) ease;
}