点击按钮后div先下移再旋转动画不生效如何解决

• 移除movement类后，translateY(500px)的变换属性丢失，元素直接回到初始Y轴位置
• removeAttribute('class', 'movement')用法错误，该方法会直接清空元素所有类名，无法删除单个指定类
• HTML中div重复定义class属性，第二个类声明会被浏览器忽略
• movementAfter的transform仅定义了旋转，未保留Y轴偏移状态，触发该类时会自动回到Y轴初始位置执行旋转

1. 修正HTML代码 #

合并重复的class属性：

<div class="slideshow"></div>
<button id="chos" onclick="movingfunc()">click to move</button>

2. 修正CSS代码 #

给movementAfter的transform属性保留Y轴偏移量：

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px);
  transition: transform 4s;
}

.movementAfter {
  transform: translateY(500px) rotate(360deg);
  background-color: red;
  transition: transform 2s, background-color 2s;
  margin: 0 auto;
  height: 100px;
  width: 200px;
}

3. 修正JavaScript代码 #

替换错误的类删除方法，调整延时时间匹配移动动画时长：

let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
  setTimeout(nextFunc, 4000) // 和movement的4s过渡时长对齐
}

function nextFunc() {
  slider.classList.remove('movement'); // 仅删除movement类，保留基础的slideshow类
  slider.classList.add('movementAfter');
}

可以用transitionend事件替代setTimeout，避免手动写死延时时间，后续修改动画时长不需要同步调整JS代码：

function movingfunc() {
  slider.classList.add('movement')
  // 监听移动动画结束事件，once参数保证事件只触发一次
  slider.addEventListener('transitionend', nextFunc, { once: true })
}

内容的提问来源于stack exchange，提问作者IR Fifa