feat: add opacity transition (#96)

ajuner · web-flow · commit 44d889dbd13d · 2021-01-08T15:55:46.000+08:00
diff --git a/src/Circle.tsx b/src/Circle.tsx
@@ -55,7 +55,7 @@ function getPathStyles(
     strokeDasharray: `${(percent / 100) * (len - gapDegree)}px ${len}px`,
     strokeDashoffset: `-${gapDegree / 2 + (offset / 100) * (len - gapDegree)}px`,
     transition:
-      'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s', // eslint-disable-line
+      'stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s', // eslint-disable-line
   };
 
   return {
diff --git a/tests/__snapshots__/index.spec.js.snap b/tests/__snapshots__/index.spec.js.snap
@@ -176,7 +176,7 @@ Array [
             "stroke": "#D9D9D9",
             "strokeDasharray": "225.30970943744057px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -196,7 +196,7 @@ Array [
             "stroke": "#2db7f5",
             "strokeDasharray": "67.59291283123217px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -234,7 +234,7 @@ Array [
             "stroke": "#D9D9D9",
             "strokeDasharray": "225.30970943744057px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -254,7 +254,7 @@ Array [
             "stroke": "#2db7f5",
             "strokeDasharray": "67.59291283123217px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -292,7 +292,7 @@ Array [
             "stroke": "#D9D9D9",
             "strokeDasharray": "225.30970943744057px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -312,7 +312,7 @@ Array [
             "stroke": "#2db7f5",
             "strokeDasharray": "67.59291283123217px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -350,7 +350,7 @@ Array [
             "stroke": "#D9D9D9",
             "strokeDasharray": "225.30970943744057px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -370,7 +370,7 @@ Array [
             "stroke": "#2db7f5",
             "strokeDasharray": "67.59291283123217px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -408,7 +408,7 @@ Array [
             "stroke": "#D9D9D9",
             "strokeDasharray": "225.30970943744057px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -428,7 +428,7 @@ Array [
             "stroke": "#2db7f5",
             "strokeDasharray": "67.59291283123217px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -466,7 +466,7 @@ Array [
             "stroke": "#D9D9D9",
             "strokeDasharray": "225.30970943744057px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />
@@ -486,7 +486,7 @@ Array [
             "stroke": "#2db7f5",
             "strokeDasharray": "67.59291283123217px 295.3097094374406px",
             "strokeDashoffset": "-35px",
-            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",
+            "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",
           }
         }
       />

Original file line number	Diff line number	Diff line change
`@@ -176,7 +176,7 @@ Array [`
`176`	`176`	`"stroke": "#D9D9D9",`
`177`	`177`	`"strokeDasharray": "225.30970943744057px 295.3097094374406px",`
`178`	`178`	`"strokeDashoffset": "-35px",`
`179`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`179`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`180`	`180`	`}`
`181`	`181`	`}`
`182`	`182`	`/>`
`@@ -196,7 +196,7 @@ Array [`
`196`	`196`	`"stroke": "#2db7f5",`
`197`	`197`	`"strokeDasharray": "67.59291283123217px 295.3097094374406px",`
`198`	`198`	`"strokeDashoffset": "-35px",`
`199`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`199`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`200`	`200`	`}`
`201`	`201`	`}`
`202`	`202`	`/>`
`@@ -234,7 +234,7 @@ Array [`
`234`	`234`	`"stroke": "#D9D9D9",`
`235`	`235`	`"strokeDasharray": "225.30970943744057px 295.3097094374406px",`
`236`	`236`	`"strokeDashoffset": "-35px",`
`237`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`237`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`238`	`238`	`}`
`239`	`239`	`}`
`240`	`240`	`/>`
`@@ -254,7 +254,7 @@ Array [`
`254`	`254`	`"stroke": "#2db7f5",`
`255`	`255`	`"strokeDasharray": "67.59291283123217px 295.3097094374406px",`
`256`	`256`	`"strokeDashoffset": "-35px",`
`257`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`257`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`258`	`258`	`}`
`259`	`259`	`}`
`260`	`260`	`/>`
`@@ -292,7 +292,7 @@ Array [`
`292`	`292`	`"stroke": "#D9D9D9",`
`293`	`293`	`"strokeDasharray": "225.30970943744057px 295.3097094374406px",`
`294`	`294`	`"strokeDashoffset": "-35px",`
`295`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`295`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`296`	`296`	`}`
`297`	`297`	`}`
`298`	`298`	`/>`
`@@ -312,7 +312,7 @@ Array [`
`312`	`312`	`"stroke": "#2db7f5",`
`313`	`313`	`"strokeDasharray": "67.59291283123217px 295.3097094374406px",`
`314`	`314`	`"strokeDashoffset": "-35px",`
`315`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`315`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`316`	`316`	`}`
`317`	`317`	`}`
`318`	`318`	`/>`
`@@ -350,7 +350,7 @@ Array [`
`350`	`350`	`"stroke": "#D9D9D9",`
`351`	`351`	`"strokeDasharray": "225.30970943744057px 295.3097094374406px",`
`352`	`352`	`"strokeDashoffset": "-35px",`
`353`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`353`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`354`	`354`	`}`
`355`	`355`	`}`
`356`	`356`	`/>`
`@@ -370,7 +370,7 @@ Array [`
`370`	`370`	`"stroke": "#2db7f5",`
`371`	`371`	`"strokeDasharray": "67.59291283123217px 295.3097094374406px",`
`372`	`372`	`"strokeDashoffset": "-35px",`
`373`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`373`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`374`	`374`	`}`
`375`	`375`	`}`
`376`	`376`	`/>`
`@@ -408,7 +408,7 @@ Array [`
`408`	`408`	`"stroke": "#D9D9D9",`
`409`	`409`	`"strokeDasharray": "225.30970943744057px 295.3097094374406px",`
`410`	`410`	`"strokeDashoffset": "-35px",`
`411`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`411`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`412`	`412`	`}`
`413`	`413`	`}`
`414`	`414`	`/>`
`@@ -428,7 +428,7 @@ Array [`
`428`	`428`	`"stroke": "#2db7f5",`
`429`	`429`	`"strokeDasharray": "67.59291283123217px 295.3097094374406px",`
`430`	`430`	`"strokeDashoffset": "-35px",`
`431`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`431`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`432`	`432`	`}`
`433`	`433`	`}`
`434`	`434`	`/>`
`@@ -466,7 +466,7 @@ Array [`
`466`	`466`	`"stroke": "#D9D9D9",`
`467`	`467`	`"strokeDasharray": "225.30970943744057px 295.3097094374406px",`
`468`	`468`	`"strokeDashoffset": "-35px",`
`469`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`469`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`470`	`470`	`}`
`471`	`471`	`}`
`472`	`472`	`/>`
`@@ -486,7 +486,7 @@ Array [`
`486`	`486`	`"stroke": "#2db7f5",`
`487`	`487`	`"strokeDasharray": "67.59291283123217px 295.3097094374406px",`
`488`	`488`	`"strokeDashoffset": "-35px",`
`489`		`- "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s",`
	`489`	`+ "transition": "stroke-dashoffset .3s ease 0s, stroke-dasharray .3s ease 0s, stroke .3s, stroke-width .06s ease .3s, opacity .3s ease 0s",`
`490`	`490`	`}`
`491`	`491`	`}`
`492`	`492`	`/>`