如何避免动画结束后重置状态？点击元素动画问题求助

Element.animate()只是临时播放动画视觉效果，不会修改元素的实际CSS属性。动画结束后，元素会自动恢复到初始样式，所以你的margin-top会回到100px。

方法1：监听动画结束事件，固定最终样式 #

在动画完成后，手动设置元素的margin-top为目标值，让样式永久生效：

document.querySelectorAll(".imagencollections").forEach(el => {
  el.addEventListener("click", e => {
    const id = e.target.getAttribute("id");
    console.log("Se ha clickeado el id " + id);

    const seleccionCollections = document.querySelector("#Seleccioncollections");
    // 创建动画并绑定结束事件
    const animation = seleccionCollections.animate({ marginTop: '0vh' }, 500);
    animation.onfinish = () => {
      seleccionCollections.style.marginTop = '0vh';
    };

    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";
    });
  });
});

方法2：用CSS过渡替代animate（更简洁） #

直接修改元素样式，利用CSS过渡实现动画，这样样式会直接生效，不会回弹：
先修改SCSS，给父元素添加过渡属性：

#Seleccioncollections{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    margin-top: 100px;
    margin-bottom: 100px;
    /* 添加过渡效果 */
    transition: margin-top 0.5s ease;

    .imagencollections{
        border: solid black 1px;
        width: 25%;
        /* 把过渡移到这里，避免重复设置 */
        transition: width 1s ease;

        img {
            width: 100%;
            height: 700px;
            object-fit: cover;
        }
    }
}

再修改JavaScript，去掉animate直接改样式：

document.querySelectorAll(".imagencollections").forEach(el => {
  el.addEventListener("click", e => {
    const id = e.target.getAttribute("id");
    console.log("Se ha clickeado el id " + id);

    // 直接修改样式，过渡自动触发动画
    document.querySelector("#Seleccioncollections").style.marginTop = '0vh';

    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%";

    const boxes = document.querySelectorAll(".imagencollections:not(#" + idpadre + ")");
    boxes.forEach(box => {
      box.style.display = "none";
    });
  });
});

方法3：通过CSS类实现（推荐，易维护） #

把动画和最终样式封装到CSS类中，点击时添加类即可：
修改SCSS：

#Seleccioncollections{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    margin-top: 100px;
    margin-bottom: 100px;
    transition: margin-top 0.5s ease;

    .imagencollections{
        border: solid black 1px;
        width: 25%;
        transition: width 1s ease;

        img {
            width: 100%;
            height: 700px;
            object-fit: cover;
        }
    }

    /* 激活状态类 */
    &.active {
        margin-top: 0vh;
    }

    .imagencollections.active {
        width: 100%;
    }
}

修改JavaScript：

document.querySelectorAll(".imagencollections").forEach(el => {
  el.addEventListener("click", e => {
    const id = e.target.getAttribute("id");
    console.log("Se ha clickeado el id " + id);

    const seleccionCollections = document.querySelector("#Seleccioncollections");
    seleccionCollections.classList.add('active');

    img = document.getElementById(id);
    const idpadre = img.parentNode.id;
    console.log("el id del padre es " + idpadre);

    // 给选中的子元素添加激活类
    document.getElementById(idpadre).classList.add('active');

    const boxes = document.querySelectorAll(".imagencollections:not(#" + idpadre + ")");
    boxes.forEach(box => {
      box.style.display = "none";
    });
  });
});

内容的提问来源于stack exchange，提问作者katana