Question

我试图在SCSS中编写一个根据宽度填充的进度跟踪器。我知道宽度正在传入，就像我检查元素时所说的宽度一样。但是，出于某种原因，动画还没有运行。

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>;

提前致谢，

Answer 1

您只定义了最后一个关键帧。要使动画运行，您还必须定义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/

CSS进度跟踪器未填满

1 个答案: