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进度跟踪器没有填满

回答

相关问题