想要实现的效果
切换车厢的时候,这个车可以执行”跑进来“的动画
思路 通过类名的删除和新增 来重新开始动画
@Watch('carriage')
private carriageChange () {
const centerContent = this.$el.querySelector('.train-item-info') as any; //
if (centerContent) {
centerContent.classList.remove('animationStart');
// eslint-disable-next-line
void centerContent.offsetWidth;
centerContent.classList.add('animationStart');
}
}
.animationStart {
animation: comeIn 3s;
}
@keyframes comeIn {
0% {left: 50%}
100% {left: 22%;}
}