diff --git a/src/assets/styles/mixin.scss b/src/assets/styles/mixin.scss
index e6b441a2..a90e2dfd 100644
--- a/src/assets/styles/mixin.scss
+++ b/src/assets/styles/mixin.scss
@@ -25,4 +25,17 @@
   &:not(:nth-child(#{$col}n)) {
     margin-right: calc(#{100 - $col * $colWidth} / #{$col - 1});
   }
+}
+
+@mixin overflow-overlay() {
+  overflow: auto;
+  overflow: overlay;
+}
+
+@mixin absolute-0 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
 }
\ No newline at end of file
diff --git a/src/assets/styles/variable.scss b/src/assets/styles/variable.scss
index 496e6521..2f11866d 100644
--- a/src/assets/styles/variable.scss
+++ b/src/assets/styles/variable.scss
@@ -5,4 +5,8 @@ $lightGray: #f9f9f9;
 
 $boxShadow: 3px 3px 3px rgba(#000, 0.15);
 
+$transitionDelay: .2s;
+$transitionDelayFast: .1s;
+$transitionDelaySlow: .3s;
+
 $borderRadius: 2px;
\ No newline at end of file
diff --git a/src/components/ColorPicker/Alpha.vue b/src/components/ColorPicker/Alpha.vue
index 7289fe0b..8da5b320 100644
--- a/src/components/ColorPicker/Alpha.vue
+++ b/src/components/ColorPicker/Alpha.vue
@@ -88,26 +88,15 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .alpha {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  @include absolute-0();
 }
 .alpha-checkboard-wrap {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   overflow: hidden;
+
+  @include absolute-0();
 }
 .alpha-gradient {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  @include absolute-0();
 }
 .alpha-container {
   cursor: pointer;
diff --git a/src/components/ColorPicker/Checkboard.vue b/src/components/ColorPicker/Checkboard.vue
index a420abd5..64e4f74b 100644
--- a/src/components/ColorPicker/Checkboard.vue
+++ b/src/components/ColorPicker/Checkboard.vue
@@ -63,11 +63,8 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .checkerboard {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   background-size: contain;
+
+  @include absolute-0();
 }
 </style>
\ No newline at end of file
diff --git a/src/components/ColorPicker/Hue.vue b/src/components/ColorPicker/Hue.vue
index eac96d71..8b77ea93 100644
--- a/src/components/ColorPicker/Hue.vue
+++ b/src/components/ColorPicker/Hue.vue
@@ -103,12 +103,9 @@ export default defineComponent({
 
 <style lang="scss" scoped>
 .hue {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
   background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
+
+  @include absolute-0();
 }
 .hue-container {
   cursor: pointer;
diff --git a/src/components/ColorPicker/Saturation.vue b/src/components/ColorPicker/Saturation.vue
index e45abdbe..23677b56 100644
--- a/src/components/ColorPicker/Saturation.vue
+++ b/src/components/ColorPicker/Saturation.vue
@@ -100,11 +100,8 @@ export default defineComponent({
 .saturation,
 .saturation-white,
 .saturation-black {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  @include absolute-0();
+
   cursor: pointer;
 }
 .saturation-white {
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index a89108f2..eec663a1 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -261,11 +261,8 @@ export default defineComponent({
   }
 }
 .picker-current-color {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  @include absolute-0();
+
   z-index: 2;
 }
 
diff --git a/src/components/Contextmenu/MenuContent.vue b/src/components/Contextmenu/MenuContent.vue
index 1648f7d3..8aef745c 100644
--- a/src/components/Contextmenu/MenuContent.vue
+++ b/src/components/Contextmenu/MenuContent.vue
@@ -68,7 +68,7 @@ $subMenuWidth: 120px;
   padding: 0 20px;
   color: #555;
   font-size: 12px;
-  transition: all .1s;
+  transition: all $transitionDelayFast;
   white-space: nowrap;
   height: $menuHeight;
   line-height: $menuHeight;
@@ -130,7 +130,7 @@ $subMenuWidth: 120px;
     right: 18px;
     top: 3px;
     transform: scale(0);
-    transition: transform .2s;
+    transition: transform $transitionDelay;
   }
 
   .sub-text {
diff --git a/src/components/WritingBoard.vue b/src/components/WritingBoard.vue
index af09dc14..3d320256 100644
--- a/src/components/WritingBoard.vue
+++ b/src/components/WritingBoard.vue
@@ -267,11 +267,7 @@ export default defineComponent({
   background-color: #0f392b;
 }
 .canvas {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  @include absolute-0();
 }
 .eraser, .pen {
   pointer-events: none;
diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue
index 75c9db26..0c3e1920 100644
--- a/src/views/Editor/Canvas/GridLines.vue
+++ b/src/views/Editor/Canvas/GridLines.vue
@@ -67,13 +67,10 @@ export default defineComponent({
 .grid-lines {
   width: 100%;
   height: 100%;
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
   overflow: visible;
   z-index: 999;
   pointer-events: none;
+
+  @include absolute-0();
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Editor/CanvasTool/ChartPool.vue b/src/views/Editor/CanvasTool/ChartPool.vue
index b7dcd454..78bd6ae2 100644
--- a/src/views/Editor/CanvasTool/ChartPool.vue
+++ b/src/views/Editor/CanvasTool/ChartPool.vue
@@ -47,11 +47,8 @@ export default defineComponent({
   cursor: pointer;
 }
 .chart-content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  @include absolute-0();
+
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/views/Editor/CanvasTool/LinePool.vue b/src/views/Editor/CanvasTool/LinePool.vue
index eeb2a7fb..697bdea8 100644
--- a/src/views/Editor/CanvasTool/LinePool.vue
+++ b/src/views/Editor/CanvasTool/LinePool.vue
@@ -108,11 +108,8 @@ export default defineComponent({
   cursor: pointer;
 }
 .line-content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  @include absolute-0();
+
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/views/Editor/CanvasTool/ShapePool.vue b/src/views/Editor/CanvasTool/ShapePool.vue
index db778cea..411d8405 100644
--- a/src/views/Editor/CanvasTool/ShapePool.vue
+++ b/src/views/Editor/CanvasTool/ShapePool.vue
@@ -86,11 +86,8 @@ export default defineComponent({
   cursor: pointer;
 }
 .shape-content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  @include absolute-0();
+
   display: flex;
   justify-content: center;
   align-items: center;
diff --git a/src/views/Editor/EditorHeader/index.vue b/src/views/Editor/EditorHeader/index.vue
index 3a4df781..2cb41ed9 100644
--- a/src/views/Editor/EditorHeader/index.vue
+++ b/src/views/Editor/EditorHeader/index.vue
@@ -142,7 +142,7 @@ export default defineComponent({
   align-items: center;
   font-size: 14px;
   padding: 0 10px;
-  transition: background-color .2s;
+  transition: background-color $transitionDelay;
   cursor: pointer;
 
   .text {
diff --git a/src/views/Editor/Remark/index.vue b/src/views/Editor/Remark/index.vue
index 911514cb..5286ac1c 100644
--- a/src/views/Editor/Remark/index.vue
+++ b/src/views/Editor/Remark/index.vue
@@ -79,11 +79,6 @@ export default defineComponent({
   textarea {
     width: 100%;
     height: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 0;
-    bottom: 0;
     overflow-y: auto;
     resize: none;
     border: 0;
@@ -91,6 +86,8 @@ export default defineComponent({
     padding: 8px;
     font-size: 12px;
     background-color: transparent;
+
+    @include absolute-0();
   }
 }
 .resize-handler {
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
index d083af4e..4ae3820e 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/ChartStylePanel/ChartDataEditor.vue
@@ -217,11 +217,11 @@ export default defineComponent({
 .editor-content {
   width: 100%;
   height: 360px;
-  overflow: auto;
-  overflow: overlay;
   position: relative;
   border-right: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
+
+  @include overflow-overlay();
 }
 .range-box {
   position: absolute;
@@ -231,17 +231,17 @@ export default defineComponent({
   user-select: none;
 }
 .temp-range {
+  width: 0;
+  height: 0;
   position: absolute;
   top: 0;
   left: 0;
-  width: 0;
-  height: 0;
   background-color: rgba($color: #888, $alpha: .3);
 }
 .range-line {
-  position: absolute;
   width: 0;
   height: 0;
+  position: absolute;
   left: 0;
   top: 0;
   border: 0 solid $themeColor;
diff --git a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
index 2965f368..e74c1009 100644
--- a/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
+++ b/src/views/Editor/Toolbar/ElementStylePanel/TextStylePanel.vue
@@ -421,7 +421,7 @@ export default defineComponent({
   align-items: center;
   position: relative;
   cursor: pointer;
-  transition: all .2s;
+  transition: all $transitionDelay;
 
   &:hover {
     border-color: $themeColor;
diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
index 2dab9a47..cac7c9d9 100644
--- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue
+++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue
@@ -115,7 +115,7 @@ export default defineComponent({
     left: 0;
     top: 0;
     background-color: #d9dadb;
-    animation: $animationType .3s linear;
+    animation: $animationType $transitionDelaySlow linear;
   }
 
   &.fade:hover {
diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue
index 15cbbe4b..fb3de198 100644
--- a/src/views/Editor/Toolbar/SlideStylePanel.vue
+++ b/src/views/Editor/Toolbar/SlideStylePanel.vue
@@ -378,7 +378,7 @@ export default defineComponent({
   border: 1px dashed $borderColor;
   border-radius: $borderRadius;
   position: relative;
-  transition: all .2s;
+  transition: all $transitionDelay;
 
   &:hover {
     border-color: $themeColor;
@@ -386,11 +386,8 @@ export default defineComponent({
   }
 
   .content {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    @include absolute-0();
+
     display: flex;
     justify-content: center;
     align-items: center;
@@ -413,16 +410,13 @@ export default defineComponent({
   cursor: pointer;
 
   .theme-item-content {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    @include absolute-0();
+
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    transition: box-shadow .2s;
+    transition: box-shadow $transitionDelay;
 
     &:hover {
       box-shadow: 0 0 4px #888;
diff --git a/src/views/Editor/Toolbar/index.vue b/src/views/Editor/Toolbar/index.vue
index 191d1308..099e76fc 100644
--- a/src/views/Editor/Toolbar/index.vue
+++ b/src/views/Editor/Toolbar/index.vue
@@ -123,7 +123,7 @@ export default defineComponent({
 .content {
   padding: 12px;
   font-size: 13px;
-  overflow: auto;
-  overflow: overlay;
+
+  @include overflow-overlay();
 }
 </style>
\ No newline at end of file
diff --git a/src/views/Screen/SlideThumbnails.vue b/src/views/Screen/SlideThumbnails.vue
index 7a0ca1ab..80a40321 100644
--- a/src/views/Screen/SlideThumbnails.vue
+++ b/src/views/Screen/SlideThumbnails.vue
@@ -79,8 +79,8 @@ export default defineComponent({
   display: flex;
   flex-wrap: wrap;
   align-content: flex-start;
-  overflow: auto;
-  overflow: overlay;
+
+  @include overflow-overlay();
 
   .thumbnail {
     width: 150px;
diff --git a/src/views/components/element/TableElement/index.vue b/src/views/components/element/TableElement/index.vue
index f3324388..f4f18852 100644
--- a/src/views/components/element/TableElement/index.vue
+++ b/src/views/components/element/TableElement/index.vue
@@ -198,13 +198,10 @@ export default defineComponent({
   cursor: move;
 }
 .table-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
+  @include absolute-0();
+
   opacity: 0;
-  transition: opacity .2s;
+  transition: opacity $transitionDelay;
 
   .mask-tip {
     position: absolute;