JS:想要在单击按钮时制作动画

Question

我想在单击"动画"按钮时对div进行动画处理/着色 你能测试我的代码并建议一些更改或添加一些代码吗？

我的代码看起来像这样：-

.anime {
animation: coloranimate 5s;
width: 100px;
height: 100px;
border: 1px solid black;
background: red;
}
@keyframes coloranimate {
from {
background: green;
}
to {
background: yellow;
border: 4px solid black;
}
}
@-webkit-keyframes coloranimate {
from {
background: green;
}
to {
background: yellow;
border: 4px solid black;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="anime">
</div>
<button>Animate</button>

我想使用动画按钮对div 进行动画/着色。

Answer 1

您可以使用.addClass()单击按钮，一旦添加包含动画属性的类，动画将自动启动。

---

请参阅代码片段：

$('button').click(function() {
$('#anime').addClass("anime");
});

#anime {
width: 100px;
height: 100px;
border: 1px solid black;
background: red;
}
.anime {
animation: coloranimate 5s;
}
@keyframes coloranimate {
from {
background: green;
}
to {
background: yellow;
border: 4px solid black;
}
}
@-webkit-keyframes coloranimate {
from {
background: green;
}
to {
background: yellow;
border: 4px solid black;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime">
</div>
<button>Animate</button>

Answer 2

在#anime元素上通过 javascript 单击添加一个类，然后具有动画......

$('.myButton').on('click', function(){
$('#anime').addClass('animate-now');
});

.anime {
width: 100px;
height: 100px;
border: 1px solid black;
background: red;
}
@keyframes coloranimate {
from {
background: green;
}
to {
background: yellow;
border: 4px solid black;
}
}
@-webkit-keyframes coloranimate {
from {
background: green;
}
to {
background: yellow;
border: 4px solid black;
}
}
.anime.animate-now {
animation: coloranimate 5s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="anime">
</div>
<button class="myButton">Animate</button>

Answer 3

在这里，您必须添加jquery才能满足您的要求。

试试这段代码，它可能会对你有所帮助。

编辑

它使用纯JavaScript。

function addAnime() {
var classadd = document.getElementById('anime');
classadd.className = 'anime';
}

.anime {
animation: coloranimate 5s;
width: 100px;
height: 100px;
border: 1px solid black;
background: red;
}
@keyframes coloranimate {
from {
background: green;
}
to {
background: yellow;
border: 4px solid black;
}
}
@-webkit-keyframes coloranimate {
from {
background: green;
}
to {
background: yellow;
border: 4px solid black;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="anime" class="">
</div>
<button onclick="addAnime()">Animate</button>