0
点赞
收藏
分享

微信扫一扫

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

大雁f 2023-10-31 阅读 37
前端vue.js
   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);
    },
举报

相关推荐

0 条评论