html函数如何创建动画过渡效果 html函数结合CSS3的动画实现

.box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.5s ease;
}

.box.active {
  width: 200px;
  height: 200px;
  background-color: red;
  transform: rotate(45deg);
}

const box = document.querySelector('.box');
box.addEventListener('click', function () {
  this.classList.toggle('active');
});

@keyframes slideIn {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.animate {
  animation: slideIn 0.6s forwards;
}

const element = document.getElementById('myElement');
element.classList.add('animate');

function replayAnimation(el, className) {
  el.classList.remove(className);
  // 强制重绘，确保下一行添加类时能重新触发动画
  void el.offsetWidth;
  el.classList.add(className);
}

// 调用
replayAnimation(document.getElementById('myBox'), 'animate');

element.addEventListener('animationend', function () {
  console.log('动画结束');
  // 可在此处移除动画类避免干扰后续样式
});