classList.add(‘rotateAnimate‘) 动画加不上的问题

Michael_Cheng_09

于 2023-09-18 21:30:17 发布

阅读量108

点赞数

文章标签： javascript less

本文链接：https://blog.csdn.net/zihang_cheng/article/details/132997805

版权

@keyframes myRotate {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(-20deg);
  }
  40% {
    transform: rotate(15deg);
  }
  60% {
    transform: rotate(-10deg);
  }
  80% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0);
  }
}

index.module.less 中使用 myRotate 此时 myRotate 会被加上hash，导致动画不生效, 因为myRotate 被加上了hash

使用 :global 来解决，

:global(.rotateAnimate) {
  animation: myRotate 2s linear;
}

.rotateAnimate :global {
  animation: myRotate 2s linear;
}

        elms[i].addEventListener('animationend', function (e) {
          elms[i].classList.remove('rotateAnimate');
        }),
        elms[i].addEventListener('mouseover', function (e) {
          elms[i].classList.add('rotateAnimate');
        })