Vue元素出现触底，消失后回到触发点

最新推荐文章于 2024-07-21 10:17:51 发布

暴富的im

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量64

点赞数

分类专栏：前端文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_59626859/article/details/134140068

版权

前端专栏收录该内容

65 篇文章 0 订阅

订阅专栏

   showCard() {
      this.isShow = true;
      const hiddenDiv = document.getElementById("hiddenDiv");
      if (this.type === "rate") {
        const style = document.createElement("style");
        style.type = "text/css";
        document.body.appendChild(style);
        style.innerText = `.union_card::before { left: 75% }`;
      }
      //已展开先消失
      if (hiddenDiv.style.display === "block") {
        hiddenDiv.style.opacity = "0";
      }
      // 显示隐藏的 div，同时通过 CSS 过渡渐入

      hiddenDiv.style.display = "block";
      let timer = setTimeout(() => {
        hiddenDiv.style.opacity = "1";
        hiddenDiv.scrollIntoView({ behavior: "smooth" });
        clearInterval(timer);
      }, 200);

      // 滚动到显示出的 div 的位置，可以使用锚点定位
    },
    closeCard() {
      this.isShow = false;
      const hiddenDiv = document.getElementById("hiddenDiv");
      const header = document.getElementById("header");
      hiddenDiv.style.opacity = "0";
      let timer1 = setTimeout(() => {
        header.scrollIntoView({ behavior: "smooth" });
        clearInterval(timer1);
      }, 500);
      let timer2 = setTimeout(() => {
        hiddenDiv.style.display = "none";
        clearInterval(timer2);
      }, 1000);
    },