Анимация CSS onClick
Как я могу получить анимацию CSS для воспроизведения с помощью JavaScript onClick? В настоящее время у меня есть:
.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
}
to {
-webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
}
}
Как я могу применить onClick?
Ответы
Ответ 1
Вы уверены, что только показываете свою страницу на веб-сайте? Вот код, переданный на сафари.
Изображение (id='img')
будет вращаться после нажатия кнопки.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style type="text/css">
.classname {
-webkit-animation-name: cssAnimation;
-webkit-animation-duration:3s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease;
-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes cssAnimation {
from {
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px);
}
to {
-webkit-transform: rotate(0deg) scale(2) skew(0deg) translate(100px);
}
}
</style>
<script type="text/javascript">
function ani(){
document.getElementById('img').className ='classname';
}
</script>
<title>Untitled Document</title>
</head>
<body>
<input name="" type="button" onclick="ani()" />
<img id="img" src="clogo.png" width="328" height="328" />
</body>
</html>
Ответ 2
Вы можете добиться этого, связав прослушиватель onclick, а затем добавив класс анимации следующим образом:
$('#button').onClick(function(){
$('#target_element').addClass('animate_class_name');
});
Ответ 3
Вы просто используете псевдокласс :active
. Это устанавливается при нажатии на любой элемент.
.classname:active {
/* animation css */
}
Ответ 4
Добавьте
-webkit-animation-play-state: paused;
в ваш файл CSS, тогда вы можете контролировать, работает ли анимация или нет, используя эту строку JS:
document.getElementById("myDIV").style.WebkitAnimationPlayState = "running";
если вы хотите, чтобы анимация запускалась один раз, каждый раз, когда вы нажимаете. Не забудьте установить
-webkit-animation-iteration-count: 1;
Ответ 5
Вы можете сделать это, используя следующий код
$('#button_id').on('click', function(){
$('#element_want_to_target').addClass('.animation_class');});
Ответ 6
Попробуйте следующее:
<div>
<p onclick="startAnimation()">Start</p><!--O botão para iniciar (start)-->
<div id="animation">Hello!</div> <!--O elemento que você quer animar-->
</div>
<style>
@keyframes animationName {
from {margin-left:-30%;}
}
</style>
<script>
function startAnimation() {
document.getElementById("animation").style.animation = "animationName 2s linear 1";
}
</script>
Ответ 7
var abox = document.getElementsByClassName("box")[0];
function allmove(){
abox.classList.remove("move-ltr");
abox.classList.remove("move-ttb");
abox.classList.toggle("move");
}
function ltr(){
abox.classList.remove("move");
abox.classList.remove("move-ttb");
abox.classList.toggle("move-ltr");
}
function ttb(){
abox.classList.remove("move-ltr");
abox.classList.remove("move");
abox.classList.toggle("move-ttb");
}
.box {
width: 100px;
height: 100px;
background: red;
position: relative;
}
.move{
-webkit-animation: moveall 5s;
animation: moveall 5s;
}
.move-ltr{
-webkit-animation: moveltr 5s;
animation: moveltr 5s;
}
.move-ttb{
-webkit-animation: movettb 5s;
animation: movettb 5s;
}
@keyframes moveall {
0% {left: 0px; top: 0px;}
25% {left: 200px; top: 0px;}
50% {left: 200px; top: 200px;}
75% {left: 0px; top: 200px;}
100% {left: 0px; top: 0px;}
}
@keyframes moveltr {
0% { left: 0px; top: 0px;}
50% {left: 200px; top: 0px;}
100% {left: 0px; top: 0px;}
}
@keyframes movettb {
0% {left: 0px; top: 0px;}
50% {top: 200px;left: 0px;}
100% {left: 0px; top: 0px;}
}
<div class="box"></div>
<button onclick="allmove()">click</button>
<button onclick="ltr()">click</button>
<button onclick="ttb()">click</button>
Ответ 8
Нашел решение по css-хитростям
const element = document.getElementById('img')
element.classList.remove('classname'); // reset animation
void element.offsetWidth; // trigger reflow
element.classList.add('classname'); // start animation