var rectangulo = document.getElementById('rectángulo')
rectangulo.addEventListener('click', animar)
function animar (ev) {
var htmlElem = ev.target
// si la animación está en curso, entonces no hacer nada
if (htmlElem.classList.contains('animar')) return
// si no, comenzar animación
htmlElem.classList.add('animar')
// subscribirse al evento "animationend". Esto hace que cuando el elemento finalice de animarse, éste llame a la función `finalizarAnimacion`
htmlElem.addEventListener('animationend', finalizarAnimacion)
function finalizarAnimacion () {
console.log('la animación ha finalizado')
//limpieza, esto permite que el elemento se vuelva a animar
htmlElem.classList.remove('animar')
// limpieza, se cancela la subscribción al evento, ésto es únicamente para impedir fugas de memoria (y por ende algunos errores en consola)
htmlElem.removeEventListener('animationend', finalizarAnimacion)
}
}
#rectángulo {
width: 50px;
height: 50px;
background-color: blue;
position: relative
}
.animar {
animation-name: mover;
animation-duration: 3s2s; animation-direction: alternate;
animation-iteration-count: 2 /* ida y vuelta*/
}
@keyframes mover {
from {
left: 0px
}
to {
left: 100px
}
}
<div id="rectángulo"></div>
<p> Haz click en el rectángulo </p>
$('#rectángulo').on('click', function animar (ev) {
var htmlElem = $(this)
if (htmlElem.hasClass('animar')) return
htmlElem.addClass('animar')
htmlElem.on('animationend', finalizarAnimacion)
function finalizarAnimacion () {
console.log('la animación ha finalizado')
htmlElem.removeClass('animar')
htmlElem.off('animationend', finalizarAnimacion)
}
})
#rectángulo {
width: 50px;
height: 50px;
background-color: blue;
position: relative
}
.animar {
animation-name: mover;
animation-duration: 3s2s;
animation-direction: alternate;
animation-iteration-count: 2 /* ida y vuelta*/
}
@keyframes mover {
from {
left: 0px
}
to {
left: 100px
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="rectángulo"></div>
<p> Haz click en el rectángulo </p>
var rectangulo = document.getElementById('rectángulo')
rectangulo.addEventListener('click', animar)
function animar (ev) {
var htmlElem = ev.target
// si la animación está en curso, entonces no hacer nada
if (htmlElem.classList.contains('animar')) return
// si no, comenzar animación
htmlElem.classList.add('animar')
// subscribirse al evento "animationend". Esto hace que cuando el elemento finalice de animarse, éste llame a la función `finalizarAnimacion`
htmlElem.addEventListener('animationend', finalizarAnimacion)
function finalizarAnimacion () {
console.log('la animación ha finalizado')
//limpieza, esto permite que el elemento se vuelva a animar
htmlElem.classList.remove('animar')
// limpieza, se cancela la subscribción al evento, ésto es únicamente para impedir fugas de memoria (y por ende algunos errores en consola)
htmlElem.removeEventListener('animationend', finalizarAnimacion)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="rectángulo"></div>
<p> Haz click en el rectángulo </p>
var rectangulo = document.getElementById('rectángulo')
rectangulo.addEventListener('click', animar)
function animar (ev) {
var htmlElem = ev.target
// si la animación está en curso, entonces no hacer nada
if (htmlElem.classList.contains('animar')) return
// si no, comenzar animación
htmlElem.classList.add('animar')
// subscribirse al evento "animationend". Esto hace que cuando el elemento finalice de animarse, éste llame a la función `finalizarAnimacion`
htmlElem.addEventListener('animationend', finalizarAnimacion)
function finalizarAnimacion () {
console.log('la animación ha finalizado')
//limpieza, esto permite que el elemento se vuelva a animar
htmlElem.classList.remove('animar')
// limpieza, se cancela la subscribción al evento, ésto es únicamente para impedir fugas de memoria (y por ende algunos errores en consola)
htmlElem.removeEventListener('animationend', finalizarAnimacion)
}
}
#rectángulo {
width: 50px;
height: 50px;
background-color: blue;
position: relative
}
.animar {
animation-name: mover;
animation-duration: 2s; animation-direction: alternate;
animation-iteration-count: 2 /* ida y vuelta*/
}
@keyframes mover {
from {
left: 0px
}
to {
left: 100px
}
}
<div id="rectángulo"></div>
<p> Haz click en el rectángulo </p>
$('#rectángulo').on('click', function animar (ev) {
var htmlElem = $(this)
if (htmlElem.hasClass('animar')) return
htmlElem.addClass('animar')
htmlElem.on('animationend', finalizarAnimacion)
function finalizarAnimacion () {
console.log('la animación ha finalizado')
htmlElem.removeClass('animar')
htmlElem.off('animationend', finalizarAnimacion)
}
})
#rectángulo {
width: 50px;
height: 50px;
background-color: blue;
position: relative
}
.animar {
animation-name: mover;
animation-duration: 2s;
animation-direction: alternate;
animation-iteration-count: 2 /* ida y vuelta*/
}
@keyframes mover {
from {
left: 0px
}
to {
left: 100px
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="rectángulo"></div>
<p> Haz click en el rectángulo </p>