播放后删除".animated“类，并添加回来，以防元素重新加载。纯Javascript

播放后删除".animated"类，并添加回来，以防元素重新加载。纯Javascript

在前端开发中，有时候我们需要在元素播放动画后，将动画类删除并重新添加回来，以防止元素重新加载。这可以通过纯Javascript来实现。

首先，我们需要获取需要添加动画的元素。可以使用document.querySelector()或document.getElementById()等方法来获取元素的引用。

然后，我们可以使用classList属性来操作元素的类。classList是一个DOMTokenList对象，它提供了一系列方法来添加、删除和切换类。

下面是一个示例代码，演示了如何在播放动画后删除".animated"类，并添加回来：

// 获取需要添加动画的元素
var element = document.querySelector('.animated');

// 播放动画
element.classList.add('animated');

// 动画播放完毕后的回调函数
function animationEndHandler() {
  // 删除".animated"类
  element.classList.remove('animated');

  // 添加回".animated"类
  element.classList.add('animated');

  // 移除动画结束事件监听器
  element.removeEventListener('animationend', animationEndHandler);
}

// 监听动画结束事件
element.addEventListener('animationend', animationEndHandler);

在上面的代码中，我们首先获取了需要添加动画的元素，然后使用classList.add()方法添加".animated"类，触发元素的动画效果。

接着，我们定义了一个animationEndHandler()函数作为动画播放完毕后的回调函数。在这个函数中，我们先使用classList.remove()方法删除".animated"类，然后使用classList.add()方法添加回".animated"类，以防止元素重新加载。

最后，我们使用element.addEventListener()方法监听元素的animationend事件，并将animationEndHandler()函数作为事件处理函数。这样，当动画播放完毕时，会自动触发animationEndHandler()函数，执行删除和添加类的操作。

这样，我们就实现了在播放动画后删除".animated"类，并添加回来的效果。

推荐的腾讯云相关产品和产品介绍链接地址：

• 云服务器（CVM）：https://cloud.tencent.com/product/cvm
• 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
• 云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cmysql
• 云存储（COS）：https://cloud.tencent.com/product/cos
• 人工智能（AI）：https://cloud.tencent.com/product/ai
• 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
• 移动开发（移动推送、移动分析）：https://cloud.tencent.com/product/mobile
• 区块链（BCS）：https://cloud.tencent.com/product/bcs
• 元宇宙（Metaverse）：https://cloud.tencent.com/solution/metaverse