Within our Javascript implementation, we incorporate two CSS animation keyframes that enable the element to be displayed or hidden:
The first keyframe conceals the element as it is animated from top to bottom:
upperGuideText.classList.add("upperGuideAnimeHide"); // Activate Hide CSS KeyFrames
The second keyframe reveals the element by animating it from bottom to top:
upperGuideText.classList.add("upperGuideAnimeShow"); // Activate Show CSS KeyFrames
We seamlessly add and remove these keyframes via classes attached to the element.
Subsequently, we define a function called guideReveal to handle the show and hide animations.
Upon invoking the guideReveal function with a text input, there are two sequential steps:
Initially, the previous text is hidden (animated from top to bottom).
Subsequently, the new text passed to the function is added and animated (from bottom to top).
The implementation is straightforward; please review the following snippet:
function guideReveal(text){
// Hide the `upperGuideText` when executing the guideReveal function
upperGuideText.classList.add("upperGuideAnimeHide"); // Activate Hide CSS KeyFrames
upperGuideText.classList.remove("upperGuideAnimeShow"); // Activate Show CSS KeyFrames
// Delay before displaying another `upperGuideText`
setTimeout(function(){
upperGuideText.innerHTML = `${text}`;
upperGuideText.classList.add("upperGuideAnimeShow"); // Activate Show CSS KeyFrames
upperGuideText.classList.remove("upperGuideAnimeHide"); // Activate Hide CSS KeyFrames
//Detect the end of only the `upperGuideAnimeShow` animation! Currently not functional
upperGuideText.addEventListener("webkitAnimationEnd", function(){
console.log('Animation of guide ended..!')
});
}, 1000);
}
Although we can currently observe the animation's conclusion when the text appears or disappears using webkitAnimationEnd, I am solely interested in monitoring the end of the upperGuideAnimeShow animation...
How can we specifically Track the completion of the upperGuideAnimeShow animation?