最小化的CSS樣式適用於步進向導

Question

我有兩個材料設計向導選擇器插件，一個是縮小版本的CSS，另一個是擴展版本。 步進單擊時兩者的行為不同。 我想知道縮小的文件是否沒有采用.step-wizard .progressbar類的過渡效果。

即使代碼相似，也請提出造成此更改的原因是什么，一個縮小，另一個擴展。

-webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;

縮小的CSS插件：

精簡的CSS步進向導

擴展CSS插件

擴展的CSS步進向導

Answer 1

步進單擊在兩個版本上都可以正常工作，唯一的區別是我看到.progressbar下的邊框不同。

擴展了：

border: 1px solid e5e6e6;

縮小有：

border:1px solid;

Answer 2

我發現了你的錯字。 您的顏色代碼有誤。

您的顏色代碼是

.progressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid e5e6e6; // have a look here. color code has no #

}

你需要這樣改變

.progressbar {
position: absolute;
background-color: #0aa89e;
opacity: 0.4;
height: 12px;
border: 1px solid #e5e6e6; // you need to change color code 

}

Answer 3

通過移除border: 1px solid e5e6e6;修復border: 1px solid e5e6e6; 來自.step-wizard .progressbar-stepper類

連結這里