爲什麼js代碼將各個部門分開？

在下面的代碼中，js代碼應該爲進度條提供動畫加載。但是，不知道爲什麼黃色條被移動，而不是在爲什麼js代碼將各個部門分開？

// [email protected] version is used 
 
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/ 
 

 
var bar = new ProgressBar.Line(container, { 
 
    strokeWidth: 4, 
 
    easing: 'easeInOut', 
 
    duration: 1400, 
 
    color: '#FFEA82', 
 
    trailColor: '#eee', 
 
    trailWidth: 1, 
 
    svgStyle: { 
 
    width: '100%', 
 
    height: '100%' 
 
    } 
 
}); 
 

 
bar.animate(1.0); // Number from 0.0 to 1.0

#liner { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 7px; 
 
    background-color: #000000; 
 
} 
 
#container { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 8px; 
 
    background-color: #f0f0f0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> 
 
<div id="liner"> 
 
    <div id="container"></div> 
 
</div>

來源

2016-08-14 syzd

一個問題是，'container'在這一行：'VAR欄=新進度。行（容器，......'笑將'＃container'作爲字符串並引用該ID。 –

正確放置你只是缺少您的SVG的CSS屬性position: absolute;。

jsFiddle Demo

代碼片段：

var bar = new ProgressBar.Line(container, { 
 
    strokeWidth: 4, 
 
    easing: 'easeInOut', 
 
    duration: 1400, 
 
    color: '#FFEA82', 
 
    trailColor: '#eee', 
 
    trailWidth: 1, 
 
    svgStyle: { 
 
    width: '100%', 
 
    height: '100%', 
 
    position: 'absolute' 
 
    } 
 
}); 
 

 
bar.animate(1.0); // Number from 0.0 to 1.0

#liner { 
 
    position: relative; 
 
    width: 600px; 
 
    height: 7px; 
 
    background-color: #000000; 
 
} 
 
#container { 
 
    position: absolute; 
 
    width: 400px; 
 
    height: 7px; 
 
    background-color: #f0f0f0; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/progressbar.js/1.0.1/progressbar.min.js"></script> 
 
<div id="liner"> 
 
    <div id="container"></div> 
 
</div>

來源

2016-08-14 18:46:23 Ricky

爲什麼js代碼將各個部門分開？

回答

相關問題