使用 css、javascript、两个按钮 onclick() 的两个动画答案

【问题标题】：Two animations using css, javascript, two buttons onclick()使用 css、javascript、两个按钮 onclick() 的两个动画
【发布时间】：2019-08-11 23:58:58
【问题描述】：

我想在 css 中创建两个动画。在我的项目中，我使用两个按钮，一个对象。我关心的是，正在单击第一个按钮，正在运行对象上的第一个动画。

我知道，当我有一个按钮和一个动画时，我应该怎么做，但我不知道如何解决同一对象上的两个不同动画的问题。

编辑 3. 我发现问题！

【问题讨论】：

您能否提供一些您编写的代码以便我们提供帮助？我对你的问题有点困惑。我认为您已经在 css 中创建了两个关键帧动画。现在你想在同一个按钮上有两个动画吗？如果是这样，你想先玩哪一个？需要考虑的一件事是，将动画添加到一个 css 类中，然后将该类添加到点击事件的 html 元素中。
@Spangle 两个不同的css动画和两个不同的按钮。我不想在同一个按钮上制作两个动画
在不知道你的动画是如何工作的并且看到它被标记为 [jquery] 的情况下，我假设你正在使用 .animate() - 你如何处理它取决于你想要什么 - 如果你想要第二个动画在第一个动画之后继续，然后再次使用.animate()。或使用 .finish() 或 .stop(true, false) api.jquery.com/stop/#stop-clearQueue-jumpToEnd api.jquery.com/finish 。 如果您不使用 jquery .animate()，请提供一些代码 - 这就是我们要求的原因。
请阅读tour和How to Ask。

标签： javascript jquery css animation svg

【解决方案1】：

这符合您的要求吗？

let btn_a = document.getElementById('a')
let btn_b = document.getElementById('b')
let btn_c = document.getElementById('c')
let div = document.getElementById('obj')
btn_a.addEventListener('click', function() {
  div.className = 'anim-a'
})
btn_b.addEventListener('click', function() {
  div.className = 'anim-b'
})
btn_c.addEventListener('click', function() {
  $('#obj').animate({}, function(){
    $('#obj').css({transform: 'rotate(30deg) translate(200px)'})
  })
})

div {
  background-color: pink;
  width: 100px;
  transition: all linear 0.5s;
}

.anim-a {
  background-color: yellowgreen;
  width: 150px;
}

.anim-b {
  background-color: grey;
  width: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='obj'>animated</div>
<button id='a'>anim-a</button>
<button id='b'>anim-b</button>
<button id='c'>anim-c</button>

编辑

没有css字段，假设你使用jQuery，你可以使用.animate()。但是，.animate() 不会将transform 作为其属性。我们将在回调中执行此操作。

btn_c.addEventListener('click',function() {
  $('#obj').animate({}, function(){
    $('#obj').css({transform: 'rotate(30deg)'})
  })
})

【讨论】：

我可以在没有字段“.anim-a”和“anim-b”的情况下使用旋转、平移等变换吗？
谢谢！我明白了，这个结果不想与 SVG 对象一起工作，但我希望我能找到解决方案。