発生している問題
プログレスバーに「動きがあるよ!」という意味でしましまのアニメーションをしたいと思い作成しました。
動いているのですが、どういう条件かわからないタイミングで、縞が一部くっついてピョコピョコしてしまいます。
気にしている挙動は画像の四角で囲った部分です。
同じ指定なのに目標2と4は無事で、1と3だけ発生してしまいます。
挙動を分析しようとCodePenでその部分だけ抜き出してみたのですが、今度は目標2と4で発生してしまいました。。。
CodePenで再現させようとしたソース
アニメーションの速度やしましまの幅などを色々触ってみたのですが、一時でなくなったと思ったら再発したりと何が原因なのかがサッパリわかりません。
どなたかよい解決方法をご存知の方、アドバイスをお願いします!
現状のソース
しましまに関わる部分だけ抜粋しています。
css
1/* プログレスバーのベース(グレーの部分) */ 2.progress-thin-base{ 3 background-color: #f5f5f5; 4 width: 100%; 5 height: 8px; 6 border-radius: 3px; 7 box-shadow: inset 0 1px 2px rgba(0,0,0,.1); 8} 9/* プログレスバー色がついている部分(色の指定は別) */ 10.progress-bar{ 11 height: 100%; 12 border-top-left-radius: 3px; 13 border-bottom-left-radius: 3px; 14 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); 15} 16/* しましましている部分 */ 17.progress-border{ 18 height: 100%; 19 border-top-left-radius: 3px; 20 border-bottom-left-radius: 3px; 21 box-shadow: inset 0 -1px 0 rgba(0,0,0,.15); 22 background: repeating-linear-gradient(45deg, #000 0, #000 1em, transparent 1em, transparent 2em); 23 opacity:.1; 24 animation: stripes-move 1s infinite linear; 25} 26/* しましまアニメーション */ 27@keyframes stripes-move { 28 100% { 29 background-position: 3em 0px; 30 } 31} 32 33/* ブログレスバーの色 */ 34.bg-info{ 35 background-color:#1CAF9A; 36}
html
1<section> 2 <!-- 目標1 --> 3 <div class="progress-title-box" style="margin-top:0;"> 4 <p class=" progress-title">目標1</p> 5 <p class="item-right">2/5</p> 6 </div> 7 <div class="progress-thin-base"> 8 <div class="progress-bar bg-info" style="width:40%"> 9 <div v-if="stripes" class="progress-border"></div> 10 </div> 11 </div> 12 <!-- 目標2 --> 13 <div class="progress-title-box" style="margin-top:0;"> 14 <p class=" progress-title">目標2</p> 15 <p class="item-right">17/18</p> 16 </div> 17 <div class="progress-thin-base"> 18 <div class="progress-bar bg-info" style="width:94%"> 19 <div v-if="stripes" class="progress-border"></div> 20 </div> 21 </div> 22 <!-- 目標3 --> 23 <div class="progress-title-box" style="margin-top:0;"> 24 <p class=" progress-title">目標3</p> 25 <p class="item-right">11.5/35</p> 26 </div> 27 <div class="progress-thin-base"> 28 <div class="progress-bar bg-info" style="width:32.8%"> 29 <div v-if="stripes" class="progress-border"></div> 30 </div> 31 </div> 32 <!-- 目標4 --> 33 <div class="progress-title-box" style="margin-top:0;"> 34 <p class=" progress-title">目標4</p> 35 <p class="item-right">1/4</p> 36 </div> 37 <div class="progress-thin-base"> 38 <div class="progress-bar bg-info" style="width:25%"> 39 <div v-if="stripes" class="progress-border"></div> 40 </div> 41 </div> 42</section> 43
widthはどのように算出されていますか?
おそらく目標部分の2/5の計算だと思いますが、その部分も含めて手打ちではなくプログラムで計算して入れられてますよね?
あと細かいですがCSSの提示部分 // でコメントアウトのようにされていますが、そのままコピペでは動かず再現確認の手間ともなるのでCSSのコメントアウトにしていただければと。
ちなみにそのコメントアウト部分を除いただけの私の環境では2と3がはっきりと同現象が起きます。1と4も発生していないわけではないですが長さの関係からかハッキリとは見えません。
widthはプログレスバーの色が付いたところのwidthですよね。
計算は仰られる通り、実績値/目標値(2/5とか)で計算しています。
実際にはVue.jsのコンポーネントになっているので計算はJavascriptで行っていますが、掲示ソースのように固定値でやっても発生するので計算は関係ないと思ってソース掲示は除外しています。
cssは// でコメントアウトできないんですね。lessと言うのを使っていて // でコメントアウトできていたのでcssも同じだと思ってました。
修正しました。ご指摘ありがとうございました。
「長さの関係からハッキリ見えない」というコメントでこんなに長いのに???となってたのですが、プログレスバーのベース(グレーの部分)の幅自体がウインドウ幅に影響されるから、ウインドウ幅が狭いと見えないってことですね。
試しにウインドウサイズを変えてみたら、どの目標値でも現象が発生しました。。。
しましまdivの幅が起因しているってことですね。
ずっと縞の幅とかばっかり気にしていたので考えてませんでした。
ありがとうございました。
回答1件
あなたの回答
tips
プレビュー