Question

我正在尝试使用HTML中的onclick事件重播After Effects动画，但不确定如何处理。动画位于其自己的div中。

我不想重新加载整个页面，只是动画我在想也许尝试一些JavaScript。

        $(function() {
        document.getElementById("ANAnimation").onclick = function () {

        }
    })

我在想一些JavaScript

Answer 1

您可以使用Callback（）函数来重复相同的动画。以下是jQuery中的示例-

$("#element").animate({
  // stuff to animate
}, function() {
  // callback function
});

Answer 2

您有两个选择

a）再次创建节点animate1

b）您可以使用CSS类并在短时间内重新分配它。（setTimeout）animate2

function animate1(el) {
  var newEl = el.cloneNode(true);
  el.parentNode.replaceChild(newEl, el);
}
function animate2(el) {
  el.className = '';
  setTimeout(function(){el.className = 'myAnimation'}, 100);
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.myAnimation {
  animation-name: example;
  animation-duration: 4s;
}

<div id="AnimationA" class="myAnimation" onClick="animate1(this)">Solution A</div>
<br />
<div id="AnimationB" class="myAnimation" onClick="animate2(this)">Solution B</div>

在效果动画onclick后重新加载

2 个答案: