代码块展开关闭动画

代码

初版，使用了js

document.addEventListener("pjax:complete", tonav);
document.addEventListener("DOMContentLoaded", tonav);

function tonav() {
  if (document.querySelector(".code-expand-btn")) {
    document
      .querySelector(".code-expand-btn")
      .addEventListener("click", function () {
        const table = this.nextElementSibling;
        // 展开状态
        const isExpanded = this.classList.contains("expand-done");
        // 展开高度
        const tabBodyHeight = table.querySelector("tbody").offsetHeight;
        // 默认高度
        const mrHeight = "300px";

        if (isExpanded) {
          table.style.maxHeight = mrHeight;

          setTimeout(() => {
            table.style.maxHeight = tabBodyHeight + "px";
          }, 1);
        }
 else {
          table.style.maxHeight = tabBodyHeight + "px";

          setTimeout(() => {
            table.style.maxHeight = mrHeight;
          }, 1);
        }
      });
  }
}

新建一个 js 文件，引入就行了

纯 css 实现版

最近忙里偷闲重新看了一下代码，经过 ds 的辅助，改了个能自适应高度的版本，终于不用写一堆 Js 辣

先进入 [themes]\butterfly\source\css\_highlight\highlight.styl 把默认样式注释掉

[themes]\butterfly\source\css_highlight\highlight.stylstyle

      &.expand-done
        & > i
          transform: rotate(180deg)

        // & + table,
        // & + pre
        //   margin-bottom: 1.8em

      // &:not(.expand-done)
      //   & ~ table,
      //   & ~ pre
      //     overflow: hidden
      //     max-height: unit(hexo-config('highlight_height_limit'), px)

然后再自己的 css 文件中添加以下代码

css

/* 代码块 */

.code-expand-btn ~ table {
  display: grid !important;
  grid-template-rows: 0fr;
  /* 初始折叠 */
  transition: 0.3s ease-in-out;
  overflow: hidden !important;
}

.code-expand-btn ~ table > tbody {
  min-height: 300px;
  margin-bottom: 1.8em;
}

.code-expand-btn.expand-done ~ table {
  grid-template-rows: 1fr;
}

/* 代码块 end */

执行三连就好了

代码块展开关闭动画

代码

纯 css 实现版

评论区