CSS進度跟蹤器沒有填滿

我想在SCSS中編寫一個進度跟蹤器，它將根據寬度進行填充。我知道寬度被傳入，因爲當我檢查元素時它說明了適當的寬度。但是，由於某些原因，動畫未運行。CSS進度跟蹤器沒有填滿

的SCSS是：

.checkout-bar 
    li.active:after { 
    @include green-stripe; 
    @include inner-shadow; 
    content:""; 
    height: 15px; 
    left: 16%; 
    float: left; 
    position: absolute; 
    top: -50px; 
    z-index: 0; 
    span.bar-animation { 
     -webkit-animation: myanimation 3s 0 forwards; 
    } 
    } 
    @-webkit-keyframes myanimation { 
    to { 
     width: 100%; 
    } 
    }

的HTML是：

<div className="checkout-wrap"> 
    <ul className="checkout-bar"> 
    <li className="visited first">Received Message</li> 
    <li className="visited">Splitting Message</li> 
    <li className="visited">Publish on Call</li> 
    <li className="previous visited">Ready to Send</li> 
    <li className="active" style={{'width': percent + '%'}}>Sending Message 
     <span className="bar-animation">&nbsp;</span> 
    </li> 
    <li className="next">Done</li> 
    </ul> 
</div>;

由於提前，

來源

2016-07-19 LivingRobot

那是SCSS或SASS或者是什麼呢？ –

這是SCSS。編輯修復錯字。謝謝。 – LivingRobot

好的，沒問題。 –

你只定義了最後一個關鍵幀。爲了動畫運行，您還必須定義from {}方面。我在下面添加了一個JSFiddle來展示我的意思。

.progress-bar { 
    background-color: red; 
    height:50px; 
    width: 0%; 
    animation-name: myanimation; 
    animation-duration: 4s; 
    } 
    @-webkit-keyframes myanimation { 
    from { 
    width:0%; 
    } 
    to { 
     width: 100%; 
    } 
    }

https://jsfiddle.net/v4nbqznt/

來源

2016-07-19 15:15:31 Maharkus

我不認爲這是問題，因爲如果我在'li.active：after'中放入'-webkit-animation：myanimation'，那麼即使沒有指定，它也可以很好地工作。問題在於它將寬度填充到「li」的100％，這是不對的。 span標籤存在一些問題，我只是不確定它是什麼。 – LivingRobot

CSS進度跟蹤器沒有填滿

回答

相關問題