JavaScript provides a list of in-built events and we can also use event listener functions on those events. Likewise, we can also create our own custom events. impress.js provides two custom events for handling step transition functionality. stepenter
and stepleave
is used in the core code to handle these events. Let's take a look at the implementation in the impress.js
file:
root.addEventListener("impress:stepenter", function (event) { event.target.classList.remove("past"); event.target.classList.remove("future"); event.target.classList.add("present"); }, false); root.addEventListener("impress:stepleave", function (event) { event.target.classList.remove("present"); event.target.classList.add("past"); }, false);
In each step transition, the stepleave
event of the current step is fired first, followed by the stepenter
event of the next step. Inside the stepenter
event, we remove the past
and future
classes and add the present
class to make it an active...