fix(mdAnchor): 折叠md目录后切换页面缩放异常的问题

example/src/components/LayAnchor.vue

@@ -33,7 +33,7 @@
   </aside>
 </template>
 <script setup lang="ts">
-import { computed, onMounted, ref, shallowRef } from "vue";
+import { computed, onMounted, ref, shallowRef, watch } from "vue";
 
 const props = defineProps<{
   anchors?: Array<string> | string;
@@ -49,6 +49,8 @@ const anchors: string | string[] | undefined = props.anchors;
 const scrollTop = ref<number>(0);
 /**要监听的滚动元素 */
 const scrollRefEl = shallowRef<HTMLElement | undefined>(undefined);
+/**折叠动画 */
+let enableAnimation = false;
 
 const anchorList = computed(() => {
   return typeof anchors === "string" ? anchors?.split(",") : anchors;
@@ -56,25 +58,39 @@ const anchorList = computed(() => {
 
 const classAside = computed(() => [
   "lay-aside",
+  { "lay-aside-animation": enableAnimation },
   { "lay-aside-collapse": !show.value },
 ]);
 
-const classAsideBtn = computed(() => [
+const classAsideBtn = computed(() => {
-  "lay-aside-collapse-btn",
+  let classBtn = [];
-  { "lay-aside-collapse-btn-collapse": !show.value },
+  if (enableAnimation) {
-]);
+    classBtn = [
+      "lay-aside-collapse-btn",
+      "lay-aside-animation",
+      { "lay-aside-collapse-btn-collapse": !show.value }
+    ];
+  } else { 
+    classBtn = [
+      "lay-aside-collapse-btn",
+      { "lay-aside-collapse-btn-collapse": !show.value }
+    ];
+
+    enableAnimation = true;
+  }
+  return classBtn;
+});
 
 const handlerBtnClick = () => {
   show.value = !show.value;
-  iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+}
-  scrollRefEl.value!.firstElementChild!.style.marginRight = show.value ? "180px" : "0px";
-};
 
 const handlerListItemClick = (index: number, id: string) => {
   activeIndex.value = index;
   scrollToTitle(id);
-};
+}
 
+/**锚点标签跟随滚动高亮 */
 const handlerScroll = () => {
   // 距离顶部 90 改变 activeIndex
   scrollTop.value = getScrollTop(scrollRefEl.value) + 90;
@@ -90,12 +106,29 @@ const handlerScroll = () => {
   });
 }
 
+const handlerCollapse = () => {
+  iconType.value = show.value ? "layui-icon-right" : "layui-icon-left";
+  scrollRefEl.value!.firstElementChild!.style.marginRight = show.value
+    ? "180px"
+    : "0px";
+}
+
+watch(show, () => {
+  handlerCollapse();
+});
+
 onMounted(() => {
   // TODO 封装 hooks
   scrollRefEl.value = document.querySelector(".layui-body");
-  if (!scrollRefEl.value) throw new Error("");
+  if (!scrollRefEl.value) {
+    throw new Error(`scroll element is not existed: ".layui-body"`);
+  }
   scrollRefEl.value.scrollTop = 0;
   scrollRefEl.value?.addEventListener("scroll", throttle(handlerScroll, 500));
+  // 如果已折叠,关闭组件初始渲染时的动画,然后自动开启
+  show.value =
+    scrollRefEl.value!.firstElementChild!.style.marginRight !== "0px";
+  enableAnimation = show.value;
 });
 
 /**获取滚动高度 */
@@ -108,7 +141,7 @@ const getScrollTop = (el: HTMLElement | undefined): number => {
         0;
 }
 /**平滑滚动 */
-const scrollToTitle = (id: string): void =>{
+const scrollToTitle = (id: string): void => {
   document.getElementById(id)?.scrollIntoView({
     behavior: "smooth",
     block: "start",
@@ -145,10 +178,16 @@ const throttle = (func: Function, wait: number) => {
   padding: 0 25px;
   background-color: #ffffff;
   border-left: 1px solid rgb(229 230 235);
-  transition: right 200ms;
+  transition: none;
+  -webkit-transition: none;
   height: calc(100% - 60px);
 }
 
+.lay-aside-collapse {
+  right: -180px;
+  opacity: 0.7;
+}
+
 .lay-aside-top {
   height: 29px;
 }
@@ -192,11 +231,6 @@ const throttle = (func: Function, wait: number) => {
   color: #5fb878 !important;
 }
 
-.lay-aside-collapse {
-  right: -180px;
-  opacity: 0.7;
-}
-
 .lay-aside-collapse-btn {
   position: fixed;
   right: 197px;
@@ -212,8 +246,9 @@ const throttle = (func: Function, wait: number) => {
   border-bottom-left-radius: 4px;
   border: rgb(229 230 235) 1px solid;
   border-right: none;
-  transition: right 200ms;
   box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
+  transition: none;
+  -webkit-transition: none;
   &:hover {
     background-color: #e2e2e2;
   }
@@ -222,6 +257,11 @@ const throttle = (func: Function, wait: number) => {
   right: 0px;
 }
 
+.lay-aside-animation {
+  transition: right 200ms;
+  -webkit-transition: right 200ms;
+}
+
 @media screen and (max-width: 768px) {
   .lay-aside {
     width: 100px !important;