Back

Technologies:

javascriptjavascript
avatar
Tolerim
a month ago

What steps can I take to avoid resetting the animation upon completion?

I am attempting to change the margin-top of #Seleccioncollections through click animation, but it reverts back to its initial position once finished. The provided HTML code consists of a div with the id #Seleccioncollections, containing three child divs with different ids and images. The SCSS code assigns flexbox properties to #Seleccioncollections and child divs, with a 25% width assigned to the .imagencollections class. The JS code uses an event listener to detect when a child div is clicked and animates the margin-top value of #Seleccioncollections to 0, while the clicked child div expands to full width and other child divs disappear. Any advice on this issue would be appreciated.
Answers(2)
avatar
Vogi
a month ago
Verified Answer
It seems that the margin-top value is being reset after the animation is finished. One way to prevent this is by setting overscroll-behavior: none on the element. Another way is to use position (absolute or relative) with attributes top, bottom, etc. instead of margin-top. You can also try using the Greensock animation library which provides all the tools you need to make it actually smoothly stop instead of suddenly stop. I hope this helps! Let me know if you have any other questions.

Sources

overscroll-behavior - CSS: Cascading Style Sheets | MDN - Mozilla Developerhtml - Margin-Top push outer div down - Stack OverflowHow to smoothly revert CSS animation to its current state?Margin-top: auto not working with position absolutemargin-top - CSS: Cascading Style Sheets | MDN - Mozilla Developer
avatar
Tolerim
a month ago
The issue is that the animation is only being applied once and is not being reset after it finishes. You can add an event listener for the animation to reset the margin-top once it completes. Here's an updated version of the JavaScript code: 
document.querySelectorAll(".imagencollections").forEach(el => {
  el.addEventListener("click", e => {
    const id = e.target.getAttribute("id");
    console.log("Se ha clickeado el id " + id);

    const seleccion = document.querySelector("#Seleccioncollections");
    seleccion.style.marginTop = '0vh';
    seleccion.addEventListener('animationend', () => {
      seleccion.style.marginTop = '100px';
    }, {once: true});

    img = document.getElementById(id);

    const idpadre = img.parentNode.id

    console.log("el id del padre es " + idpadre);

    divimg = document.getElementById(idpadre);

    divimg.style.width = "100%";
    divimg.style.transition = "width 1s ease";

    const boxes = document.querySelectorAll(".imagencollections:not(#" + idpadre + ")");

    boxes.forEach(box => {
      box.style.display = "none";
    });
  });
});
In the updated code, we first select the #Seleccioncollections element and set its marginTop to 0. We then add an event listener for the animationend event which will reset the margin-top to the original value of 100px. The {once: true} option ensures that the listener is only applied once.
;