- limit transition to only the style we need to animate.

zbryikt · zbryikt · commit 2db948b737a4 · 2022-04-20T09:59:06.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # Change Logs
 
+## v2.0.1
+
+ - limit transition to only the style we need to animate.
+
+
 ## v2.0.0
 
  - rename `ldbtn.css`, `ldbtn.min.css` to `index.css` and `index.min.css`
diff --git a/dist/index.css b/dist/index.css
@@ -7,8 +7,6 @@
 .ld-over-full,
 .ld-over-full-inverse {
   position: relative;
-  transition: all 0.3s;
-  transition-timing-function: ease-in;
 }
 .ld-ext-right > .ld,
 .ld-ext-left > .ld,
@@ -56,7 +54,14 @@
   z-index: auto;
   visibility: visible;
 }
+.ld-ext-right,
+.ld-ext-left,
+.ld-ext-bottom,
+.ld-ext-top {
+  transition-timing-function: ease-in;
+}
 .ld-ext-right.running {
+  transition: padding-right 0.3s;
   padding-right: 2.5em !important;
 }
 .ld-ext-right > .ld {
@@ -65,6 +70,7 @@
   right: 1.25em;
 }
 .ld-ext-left.running {
+  transition: padding-left 0.3s;
   padding-left: 2.5em !important;
 }
 .ld-ext-left > .ld {
@@ -73,6 +79,7 @@
   left: 1.25em;
 }
 .ld-ext-bottom.running {
+  transition: padding-bottom 0.3s;
   padding-bottom: 2.5em !important;
 }
 .ld-ext-bottom > .ld {
@@ -81,6 +88,7 @@
   bottom: 1.25em;
 }
 .ld-ext-top.running {
+  transition: padding-top 0.3s;
   padding-top: 2.5em !important;
 }
 .ld-ext-top > .ld {
diff --git a/dist/index.min.css b/dist/index.min.css
diff --git a/src/index.styl b/src/index.styl
@@ -1,7 +1,5 @@
 .ld-ext-right, .ld-ext-left, .ld-ext-bottom, .ld-ext-top, .ld-over, .ld-over-inverse, .ld-over-full, .ld-over-full-inverse
   position: relative
-  transition: all .3s
-  transition-timing-function: ease-in
   & > .ld
     position: absolute
     top: 50%
@@ -25,28 +23,35 @@
     z-index: auto
     visibility: visible
 
+.ld-ext-right, .ld-ext-left, .ld-ext-bottom, .ld-ext-top
+  transition-timing-function: ease-in
+
 .ld-ext-right.running
+  transition: padding-right .3s
   padding-right: 2.5em!important
 .ld-ext-right > .ld
   top: 50%
   left: auto
   right: 1.25em
 
 .ld-ext-left.running
+  transition: padding-left .3s
   padding-left: 2.5em!important
 .ld-ext-left > .ld
   top: 50%
   right: auto
   left: 1.25em
 
 .ld-ext-bottom.running
+  transition: padding-bottom .3s
   padding-bottom: 2.5em!important
 .ld-ext-bottom > .ld
   top: auto
   left: 50%
   bottom: 1.25em
 
 .ld-ext-top.running
+  transition: padding-top .3s
   padding-top: 2.5em!important
 .ld-ext-top > .ld
   bottom: auto

Original file line number	Diff line number	Diff line change
`@@ -7,8 +7,6 @@`
`7`	`7`	`.ld-over-full,`
`8`	`8`	`.ld-over-full-inverse {`
`9`	`9`	`position: relative;`
`10`		`- transition: all 0.3s;`
`11`		`- transition-timing-function: ease-in;`
`12`	`10`	`}`
`13`	`11`	`.ld-ext-right > .ld,`
`14`	`12`	`.ld-ext-left > .ld,`
`@@ -56,7 +54,14 @@`
`56`	`54`	`z-index: auto;`
`57`	`55`	`visibility: visible;`
`58`	`56`	`}`
	`57`	`+.ld-ext-right,`
	`58`	`+.ld-ext-left,`
	`59`	`+.ld-ext-bottom,`
	`60`	`+.ld-ext-top {`
	`61`	`+ transition-timing-function: ease-in;`
	`62`	`+}`
`59`	`63`	`.ld-ext-right.running {`
	`64`	`+ transition: padding-right 0.3s;`
`60`	`65`	`padding-right: 2.5em !important;`
`61`	`66`	`}`
`62`	`67`	`.ld-ext-right > .ld {`
`@@ -65,6 +70,7 @@`
`65`	`70`	`right: 1.25em;`
`66`	`71`	`}`
`67`	`72`	`.ld-ext-left.running {`
	`73`	`+ transition: padding-left 0.3s;`
`68`	`74`	`padding-left: 2.5em !important;`
`69`	`75`	`}`
`70`	`76`	`.ld-ext-left > .ld {`
`@@ -73,6 +79,7 @@`
`73`	`79`	`left: 1.25em;`
`74`	`80`	`}`
`75`	`81`	`.ld-ext-bottom.running {`
	`82`	`+ transition: padding-bottom 0.3s;`
`76`	`83`	`padding-bottom: 2.5em !important;`
`77`	`84`	`}`
`78`	`85`	`.ld-ext-bottom > .ld {`
`@@ -81,6 +88,7 @@`
`81`	`88`	`bottom: 1.25em;`
`82`	`89`	`}`
`83`	`90`	`.ld-ext-top.running {`
	`91`	`+ transition: padding-top 0.3s;`
`84`	`92`	`padding-top: 2.5em !important;`
`85`	`93`	`}`
`86`	`94`	`.ld-ext-top > .ld {`