How to make a Trigger animationend without Jquery?

Asked

Viewed 48 times

0

How is it possible to make a .trigger without using jQuery?

For example, I saw that it is possible with the event click use the element.click();, but when the event is animationend?

In jQuery, it would be equivalent to: $( "#element" ).trigger( "animationend" );

javascript

  • your question missing details to answer, has some example?

  • take a look at the source code of jquery to understand and do what you want, it’s all on github: https://github.com/jquery/jquery/blob/40c3abd0ab049449acab5f2e12c34b9cc3199482/src/event/trigger.js

1 answer

1


The basics would be to use var event = new Event('animationend') with <Element>.dispatchEvent(event);, example applied with addEventListener and onanimationend

var elementoAnimado = document.querySelector('#exemplo');

elementoAnimado.addEventListener('animationend', (event) => {
    console.log('Element.addEventListener(animationend) #1', event.target);
});

elementoAnimado.onanimationend = (event) => {
    console.log('Element.onanimationend = () => {}', event.target);
};

elementoAnimado.addEventListener('animationend', (event) => {
    console.log('Element.addEventListener(animationend) #2', event.target);
});

function disparar()
{
     elementoAnimado.dispatchEvent(new Event('animationend'));
}
<div id="exemplo">Exemplo</div>

<button onclick="disparar()">Disparar</button>

Remember that ancient navigators used document.createEvent('Event'), like Internet Explorer, if you need to run it you will have to apply it.

Currently the most reasonable documentation to learn the basics of Javascript is on MDN, I recommend studying the basics:

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.