动画不能正常工作

Question

我有一个块，当改变动态高度时。打开动画是正确的，但是当我关闭块的时候，动画就掉了，不明白为什么。

链接：dev.divisory.com/6/

代码示例：

let linetags_more = (e) => {
  clearTimeout(timer);

  let container = e.target.closest(".js-line-tags");
  let spc = e.target.closest(".js-line-tags").querySelector(".line-tags__wrap").clientHeight;
  const box = container.querySelector(".line-tags__box");


  if(container.classList.contains("js-line-tags__more--active")) {
    container.classList.remove("js-line-tags__more--active");
    box.style.maxHeight = spc+"px";
  
    timer = setTimeout(() => {
      box.style.maxHeight = row+"px";
    }, 100);

    
  } else {
    
    box.style.maxHeight = spc+"px";
    timer = setTimeout(() => {
      container.classList.add("js-line-tags__more--active");
      box.removeAttribute("style");
    }, 200);
  }

  e.preventDefault();  
}

​

​

Answer 1

问题出在box.removeAttribute("style")上。只要去掉它，一切都会好起来的。

if (container.classList.contains("js-line-tags__more--active")) {
    container.classList.remove("js-line-tags__more--active");
    box.style.maxHeight = spc + "px";

    timer = setTimeout(() => {
        box.style.maxHeight = "60" + "px";
    }, 100);


} else {

    box.style.maxHeight = spc + "px";
    timer = setTimeout(() => {
        container.classList.add("js-line-tags__more--active");
        //box.removeAttribute("style");
    }, 200);
}