动画无法正常工作

roejwanj  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(186)

我有一个块,当改变动态高度。打开动画工作正常,但当im关闭块时,动画会下降,无法理解原因。
链接: 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();  
}

omjgkv6w

omjgkv6w1#

问题是 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);
}

相关问题