@innovastudio/contentbox 1.4.28 → 1.4.29

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbox",
   "type": "module",
-  "version": "1.4.28",
+  "version": "1.4.29",
   "description": "",
   "main": "public/contentbox/contentbox.esm.js",
   "files": [

package/public/contentbox/contentbox.css

@@ -476,10 +476,15 @@
   /* setting display=none makes initial script may not work properly */
   transform-origin: top;
 }
-
 .is-wrapper.is-edit {
   padding-left: 60px;
 }
+.is-wrapper .transition-edit.is-section {
+  transition: all 0.2s ease !important;
+}
+.is-wrapper .transition-edit .is-box {
+  transition: all 0.2s ease !important;
+}
 
 #_cbhtml {
   height: 0px;

package/public/contentbox/contentbox.esm.js

@@ -3838,8 +3838,16 @@ class EditSection {
     btnSectionHeight.forEach(btn => {
       btn.addEventListener('click', () => {
         this.builder.editor.saveForUndo();
-        let val = btn.getAttribute('data-value');
-        this.sectionHeight(val);
+        let val = btn.getAttribute('data-value'); // this.sectionHeight(val);
+
+        const activeSection = this.builder.activeSection;
+        activeSection.classList.add('transition-edit');
+        setTimeout(() => {
+          this.sectionHeight(val);
+          setTimeout(() => {
+            activeSection.classList.remove('transition-edit');
+          }, 200);
+        }, 10);
         let btns = modalEditSection.querySelectorAll('.cmd-section-height');
         btns.forEach(btn => {
           dom$k.removeClass(btn, 'on');
@@ -4406,8 +4414,7 @@ class EditSection {
     } //Trigger Render event
 
 
-    this.builder.settings.onRender();
-    this.builder.scrollTo(activeSection, 600);
+    this.builder.settings.onRender(); // this.builder.scrollTo(activeSection, 600);
   }
 
   boxSpacing(s) {
@@ -10234,15 +10241,31 @@ class EditBox {
     modalEditBox.querySelector('#tabBoxGeneral').click();
     const btnBoxSmaller = modalEditBox.querySelector('.cmd-box-smaller');
     btnBoxSmaller.addEventListener('click', () => {
-      this.builder.editor.saveForUndo();
-      this.boxWidthSmaller(); //Trigger Change event
+      this.builder.editor.saveForUndo(); // this.boxWidthSmaller();
+
+      const activeSection = this.builder.activeSection;
+      activeSection.classList.add('transition-edit');
+      setTimeout(() => {
+        this.boxWidthSmaller();
+        setTimeout(() => {
+          activeSection.classList.remove('transition-edit');
+        }, 200);
+      }, 10); //Trigger Change event
 
       this.builder.settings.onChange();
     });
     const btnBoxLarger = modalEditBox.querySelector('.cmd-box-larger');
     btnBoxLarger.addEventListener('click', () => {
-      this.builder.editor.saveForUndo();
-      this.boxWidthLarger(); //Trigger Change event
+      this.builder.editor.saveForUndo(); // this.boxWidthLarger();
+
+      const activeSection = this.builder.activeSection;
+      activeSection.classList.add('transition-edit');
+      setTimeout(() => {
+        this.boxWidthLarger();
+        setTimeout(() => {
+          activeSection.classList.remove('transition-edit');
+        }, 200);
+      }, 10); //Trigger Change event
 
       this.builder.settings.onChange();
     });