Передача переменной для CSS3 Анимация

Question

У меня есть индикатор выполнения, который я хочу перемещать в соответствии с текущей шириной. Я могу заставить его перейти к статической ширине, но я понятия не имею, как передать новую ширину, чтобы установить ее.

CSS-это

@media all and (min-width: 800px) { 
    .checkout-bar li.active:after { 
     @include green-stripe; 
     @include inner-shadow; 
     content:""; 
     height: 15px; 
     left: 50%; 
     width: 0%; 
     float: left; 
     position: absolute; 
     top: -50px; 
     z-index: 0; 
     -webkit-animation: myanimation 3s 0 forwards; 
    } 
    @-webkit-keyframes myanimation { 
     from { 
     width: 0; 
     } 
     to { 
     width: 50%; //I would like this to be a variable 
     } 
    } 

Это HTML:

<div className="checkout-wrap"> 
    <ul className="checkout-bar"> 
     <li className="visited">Received Message</li> 
     <li className="visited">Splitting Message</li> 
     <li className="visited">Publish on Call</li> 
     <li className="visited">Ready to Send</li> 
     <li className="active" style={{'width': iOSPercent + '%'}}>Sending Message</li> // this should pass in the width 
     <li className="next">Done</li> 
    </ul> 

</div>; 

Спасибо заранее,

Answer 1

Используйте дополнительный дочерний узел (как div) для анимации загрузки и установить цель ключевого кадра - 100%. Детский узел должен взять все пространство вашего li, чтобы он отвечал на ширину, которую вы устанавливали программно. И, конечно же, измените CSS, чтобы таргетировать div, а не li.