JavaScript收缩动画逻辑
contractionLeftClick() {
let leftSetVal = null;
if (this.contractionLeft == 0) {
leftSetVal = setInterval(() => {
this.contractionLeft -= 4;
if (this.contractionLeft == -428) {
clearInterval(leftSetVal);
}
}, 1);
} else {
leftSetVal = setInterval(() => {
this.contractionLeft += 4;
if (this.contractionLeft == 0) {
clearInterval(leftSetVal);
}
}, 1);
}
},
contractionRightClick() {
let rightSetVal = null;
if (this.contractionRight == 0) {
rightSetVal = setInterval(() => {
this.contractionRight -= 4;
if (this.contractionRight == -428) {
clearInterval(rightSetVal);
}
}, 1);
} else {
rightSetVal = setInterval(() => {
this.contractionRight += 4;
if (this.contractionRight == 0) {
clearInterval(rightSetVal);
}
}, 1);
}
},
CSS收缩动画
.left-open{
animation: leftOpen 0.5s linear forwards;
}
.left-close{
animation: leftClose 0.5s linear forwards;
}
@keyframes leftOpen {
from{
left: -428px;
}
to{
left: 0px;
}
}
@keyframes leftClose {
from{
left: 0px;
}
to{
left: -428px;
}
}
.right-open{
animation: rightOpen 0.5s linear forwards;
}
.right-close{
animation: rightClose 0.5s linear forwards;
}
@keyframes rightOpen {
from{
right: -428px;
}
to{
right: 0px;
}
}
@keyframes rightClose {
from{
right: 0px;
}
to{
right: -428px;
}
}
