阻止动画在 CSS 中自动播放 [重复]答案

【问题标题】：Stop an animation from auto-playing in CSS [duplicate]阻止动画在 CSS 中自动播放 [重复]
【发布时间】：2018-10-30 17:13:48
【问题描述】：

我将这个动画应用到了一张桌子上。我希望每次单击会更改表格内容的链接时都会发生这种情况，但在加载页面时不会立即发生。

.scale-up {
    animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

【问题讨论】：

可以添加你的html代码吗？

标签： html css

【解决方案1】：

在使用addClass 或toogleClass 后首先删除类scale-up：

$(document).ready(function(){
  $('a').click(function(){
  $('table').addClass('scale-up');
  })
})

$(document).ready(function(){
  $('a').click(function(){
  $('table').addClass('scale-up');
  })
})

table {
  transform: scale(0.5);
}

.scale-up {
    animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#">Click On Me! </a>
<table border="1">
  <tr><td>This is tr1td1</td><td>This is tr1td2</td><td>This is tr1td2</td></tr>
  <tr><td>This is tr2td1</td><td>This is tr2td2</td><td>This is tr2td2</td></tr>
</table>

您也可以使用toogleClass：

$(document).ready(function(){
  $('a').click(function(){
  $('table').toggleClass('scale-up');
  })
})

$(document).ready(function(){
  $('a').click(function(){
  $('table').toggleClass('scale-up');
  })
})

table {
  transform: scale(0.5);
}

.scale-up {
    animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<a href="#">Click Me Two times... </a>
<table border="1">
  <tr><td>This is tr1td1</td><td>This is tr1td2</td><td>This is tr1td2</td></tr>
  <tr><td>This is tr2td1</td><td>This is tr2td2</td><td>This is tr2td2</td></tr>
</table>

【讨论】：

【解决方案2】：

这可以通过 JQuery 完成 - 添加类后，您还需要在动画完成后将其删除，以确保可以在后续单击时切换它。在下面的示例中，我使用 500 毫秒的超时时间完成了此操作：

(function() {
  var c = document.getElementById("table");

  function addAnim() {
    c.classList.add("scale-up");

    setTimeout(function() {
      c.classList.remove("scale-up");
    }, 500);
  }

  c.addEventListener("click", addAnim);
})();

Codepen

【讨论】：

【解决方案3】：

试试这个，这是在 JQuery 中完成的

$('.link').on('click', function(event) {
  event.preventDefault()
  $('.item').removeClass('scale-up');
  setTimeout(function() {
    $('.item').addClass('scale-up');
  }, 100)  
})

.scale-up {
    animation: scale-up 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@keyframes scale-up {
  0% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='item'>Content</div>
<a class='link' href='#'>Click</a>

【讨论】：

【解决方案4】：

您绝对可以使用 JavaScript 或 JQuery 来实现。诀窍是在某个事件上添加一个类。这是一个例子

JavaScript

var element = document.getElementById("myDIV");
element.classList.add("scale-up");

JQuery

$("button").click(function(){
  $("#myDiv").addClass("scale-up");
});

在here 和here 了解更多信息。

【讨论】：