在 JS 或 jQuery 中执行关键帧动画

Question

我知道可以通过 id 在样式表或 DOM 中的 JS 中设置元素的动画。问题是我希望每次用户对特定元素执行单击操作时都执行动画。在 JS 中将动画添加到元素的样式中似乎会永久添加它，因此无法再次执行关键帧动画（仅在窗口完成加载时执行一次）。我还考虑过使用 jQuery 的 .animate() 函数，但是所有文档都指向它通过 CSS 特定样式设置动画，而不是设置/调用动画样式属性，就好像我要使用 CSS 设置它一样。我想知道当用户点击另一个元素并为每次点击持续执行动画时，在一个元素上执行动画的最佳方式。

@keyframes fadeInDown {
  from {
   opacity: 0;
   transform: translate(0, -20%);
 }
 to {
   opacity: 1;
   transform: translate(0, 0);
 }
}

我为元素设置动画的当前方式：

$("#element").css("animation", "fadeInDown 0.5s ease-in 0s 1");

Answer 1

这是一个使用transition和jquery的切换动画，没有使用.animate()

$(document).ready(function() {
  $('button').click(function() {
    var box = $('.box')
    box.removeClass("show")
    setTimeout(function(){
        box.addClass("trans").addClass("show")
        setTimeout(function(){
            box.removeClass("trans")
        },100)
    },200)
  });
});

.box {
  background: red;
  height: 50px;
  width: 50px;
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
  opacity: 0;
  transform: translate(0, -20%);
}

.box.trans {
  transition: all 0.7s;
}

.box.show {
  opacity: 1;
  transform: translate(0, 0);
}

<button>Test</button>
<div class="box show"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Answer 2

这是我关于堆栈溢出的第一个答案。 我对动画也有同样的疑问。

我上次所做的就像 Vivek Patel 的回答，但是我没有切换 css 关键帧，而是创建了一个仅为 css 动画（“animation-fadeInDown”）的单独类，并切换它。

因为动画名称“fadeInDown”对应于 @keyframes 名称，所以如果将其分开，您可以通过切换动画类将动画应用于其他元素。

而且，您仍然可以单独对原始框进行 css 装饰，这样可能更易于阅读。

我希望这与您正在寻找的内容接近。

$('button').click(() => {
  $('.box').toggleClass('animation-fadeInDown');
});

.box {
  width: 50px;
  height: 50px;
  background: black;
}

.animation-fadeInDown {
  animation: fadeInDown 0.5s ease-in 0s 1
}

@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate(0, -20%);
    }
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box"></div>
<button>
    Test
</button>

Answer 3

基本上，CSS 动画只在页面加载时运行一次。所以不可能再次重新触发它。以下是您的用例的解决方法：从页面中完全删除元素并重新插入。

试试这个：

$('button').click(() => {
  var oldDiv = $('#animated-div');
  newDiv = oldDiv.clone(true);

 	oldDiv.before(newDiv);

	$("." + oldDiv.attr("class") + ":last").remove();
});

@keyframes fadeInDown {
    from {
      opacity: 0;
      transform: translate(0, -20%);
    }
    to {
      opacity: 1;
      transform: translate(0, 0);
    }
}

.animated-div {
  animation: fadeInDown 0.5s ease-in 0s 1
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="animated-div" class="animated-div" style="width: 50px; height: 50px; background: black"></div>
<button>
Test
</button>

Answer 4

这是一个简单的例子，它使用 jquery 在 Queue 中进行动画处理，因为它在 @keyframes 中工作。过渡持续时间和动画持续时间可以更好地控制动画角色。

$(document).ready(function() {
  $('button').click(function() {
    $('.box')
      .css('transition', 'all 0.2s')
      .animate({ opacity: 0 }, {
        duration: 200,
        step: function(now) {
          $(this).css({ opacity: now });
          $(this).css({ transform: 'translate(0, -20%)' });
        }
      })
      .animate({ opacity: 1 }, {
        duration: 600,
        step: function(now) {
          $(this).css({ opacity: now });
          $(this).css({ transform: 'translate(0, 0)' });
        }
      })
  });
});

.box {
  background: red;
  height: 50px;
  width: 50px;
  position: absolute;
  margin-top: 50px;
  margin-left: 50px;
}

<button>Test</button>
<div class="box"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>