时间戳

首页 > 解决方案 > 使用 JavaScript 创建新的“动画”实例（div 上的 CSS 属性）

javascript - 使用 JavaScript 创建新的“动画”实例（div 上的 CSS 属性）

问题描述

我有一个带有类反馈的元素，当调用 JavaScript 函数时，会添加 feedbackAnimate 动画。

document.querySelector('.feedback').classList.add('feedbackAnimate');

我希望每次调用函数时都播放动画，但不要“删除”/重置原始动画。我猜我需要创建新的 div 实例，对吗？我如何从 JavaScript 中做到这一点？

动画 CSS：

.feedback {
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-color: green;
  z-index: 20;
  left: calc(50% - 15px);
  top: 0;
  position: absolute;
  z-index: -2;
}

.feedbackAnimate {
  animation-name: removeLayer;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transform: translateY(-300%);
  transform-origin: bottom right;
  opacity: 1;
}

@keyframes removeLayer {
  0% {
    transform: translateY(0%);
    opacity: 0;
  }
  100% {
    transform: translateY(-300%);
    opacity: 1;
  }
}

标签： javascriptcssanimationcss-animations

解决方案

推荐阅读