diff --git a/app/src/assets/scss/_block.scss b/app/src/assets/scss/_block.scss index fe13d16f1..1fa2878a4 100644 --- a/app/src/assets/scss/_block.scss +++ b/app/src/assets/scss/_block.scss @@ -125,10 +125,6 @@ flex-direction: column; border-bottom: 1px solid var(--b3-theme-surface-lighter); - .protyle-wysiwyg { - transition: none; - } - &:last-child { border-bottom: 0; } diff --git a/app/src/assets/scss/_protyle.scss b/app/src/assets/scss/_protyle.scss index 831da373d..b9637ddf7 100644 --- a/app/src/assets/scss/_protyle.scss +++ b/app/src/assets/scss/_protyle.scss @@ -261,6 +261,20 @@ .protyle-content { overflow: auto; flex: 1; + + &--transition { + .protyle-wysiwyg { + transition: padding .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + } + + .protyle-title { + transition: margin .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + } + + .protyle-background__iconw { + transition: left .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + } + } } .protyle-background { @@ -401,7 +415,6 @@ display: flex; position: absolute; height: 80px; - transition: left .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; .protyle-icons { position: initial; @@ -414,7 +427,6 @@ margin: 34px 16px 0 24px; position: relative; font-size: 16px; - transition: margin .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; &:hover .protyle-title__icon { opacity: 1; diff --git a/app/src/assets/scss/_wysiwyg.scss b/app/src/assets/scss/_wysiwyg.scss index c1abc09b3..59f27121e 100644 --- a/app/src/assets/scss/_wysiwyg.scss +++ b/app/src/assets/scss/_wysiwyg.scss @@ -1,7 +1,7 @@ .protyle-wysiwyg { padding: 34px 16px 16px 24px; cursor: text; - transition: padding .3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0ms; + box-sizing: border-box; .protyle-breadcrumb__bar { diff --git a/app/src/layout/index.ts b/app/src/layout/index.ts index bd553f981..e497b35ba 100644 --- a/app/src/layout/index.ts +++ b/app/src/layout/index.ts @@ -81,10 +81,14 @@ export class Layout { item.element.classList.add("fn__flex-1"); if (this.direction === "lr") { // 向右分屏,左侧文档抖动,移除动画和边距 - item.element.querySelectorAll(".protyle-wysiwyg").forEach((element: HTMLElement) => { - element.style.transition = "none"; - element.style.paddingRight = "16px"; - element.style.paddingLeft = "24px"; + item.element.querySelectorAll(".protyle-content").forEach((element: HTMLElement) => { + if (!element.parentElement.classList.contains("fn__none")) { + element.classList.remove("protyle-content--transition"); + const wysiwygElement = element.querySelector(".protyle-wysiwyg") as HTMLElement; + wysiwygElement.style.paddingRight = "16px"; + wysiwygElement.style.paddingLeft = "24px"; + element.classList.add("protyle-content--transition"); + } }); } item.element.after(child.element); diff --git a/app/src/layout/util.ts b/app/src/layout/util.ts index e496aafd0..a8c950698 100644 --- a/app/src/layout/util.ts +++ b/app/src/layout/util.ts @@ -625,9 +625,7 @@ export const addResize = (obj: Layout | Wnd) => { const documentSelf = document; const nextElement = resizeElement.nextElementSibling as HTMLElement; const previousElement = resizeElement.previousElementSibling as HTMLElement; - nextElement.style.transition = ""; nextElement.style.overflow = "auto"; // 拖动时 layout__resize 会出现 https://github.com/siyuan-note/siyuan/issues/6221 - previousElement.style.transition = ""; previousElement.style.overflow = "auto"; setSize(nextElement, direction); setSize(previousElement, direction); diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts index e7ad5f913..5cc67172d 100644 --- a/app/src/protyle/index.ts +++ b/app/src/protyle/index.ts @@ -217,6 +217,7 @@ export class Protyle { } }); } + this.protyle.contentElement.classList.add("protyle-content--transition") } private init() { diff --git a/app/src/protyle/ui/initUI.ts b/app/src/protyle/ui/initUI.ts index 0cb5bfc52..bd9f8bd81 100644 --- a/app/src/protyle/ui/initUI.ts +++ b/app/src/protyle/ui/initUI.ts @@ -124,7 +124,6 @@ export const setPadding = (protyle: IProtyle) => { } else { protyle.wysiwyg.element.style.padding = `16px ${min16}px ${bottomHeight} ${min24}px`; } - protyle.wysiwyg.element.style.transition = ""; // addWnd 时防止向右分屏,左侧文档抖动,移除动画 if (window.siyuan.config.editor.codeSyntaxHighlightLineNum) { setTimeout(() => { // https://github.com/siyuan-note/siyuan/issues/5612 protyle.wysiwyg.element.querySelectorAll('.code-block [contenteditable="true"]').forEach((block: HTMLElement) => {