Skip to main content
Commonmark migration
Origen Enlace

##Javascript Puro (ninguna librería)

Javascript Puro (ninguna librería)

##Javascript Puro (ninguna librería)

Javascript Puro (ninguna librería)

mejorar animación
Origen Enlace
Eduen Sarceño
  • 2.1k
  • 12
  • 21
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)
  }
}
#rectángulo {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative
}

.animar {
  animation-name: mover;
  animation-duration: 3s
}

@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: 3s
}

@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)
  }
}
#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>
ammend
Origen Enlace
Eduen Sarceño
  • 2.1k
  • 12
  • 21
$('#rectángulo').on('click', function animar (ev) {
  var htmlElem = $(this)
  if (htmlElem.hasClass('animar')) return
  htmlElem.addClass('animar')
  htmlElem.bindon('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: 3s
}

@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>
$('#rectángulo').on('click', function animar (ev) {
  var htmlElem = $(this)
  if (htmlElem.hasClass('animar')) return
  htmlElem.addClass('animar')
  htmlElem.bind('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: 3s
}

@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>
$('#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: 3s
}

@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>
Origen Enlace
Eduen Sarceño
  • 2.1k
  • 12
  • 21
Loading