質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.62%

しましまアニメーションがおかしいのを解決したい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 732

SystemAjisai

score 169

発生している問題

プログレスバーに「動きがあるよ!」という意味でしましまのアニメーションをしたいと思い作成しました。
動いているのですが、どういう条件かわからないタイミングで、縞が一部くっついてピョコピョコしてしまいます。
アニメーションがおかしい

気にしている挙動は画像の四角で囲った部分です。
同じ指定なのに目標2と4は無事で、1と3だけ発生してしまいます。

挙動を分析しようとCodePenでその部分だけ抜き出してみたのですが、今度は目標2と4で発生してしまいました。。。
CodePenで再現させようとしたソース

アニメーションの速度やしましまの幅などを色々触ってみたのですが、一時でなくなったと思ったら再発したりと何が原因なのかがサッパリわかりません。
どなたかよい解決方法をご存知の方、アドバイスをお願いします!

現状のソース

しましまに関わる部分だけ抜粋しています。

/* プログレスバーのベース(グレーの部分) */
.progress-thin-base{
  background-color: #f5f5f5;
  width: 100%;
  height: 8px;
  border-radius: 3px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
}
/* プログレスバー色がついている部分(色の指定は別) */
.progress-bar{
  height: 100%;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
}
/* しましましている部分 */
.progress-border{
  height: 100%;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.15);
  background: repeating-linear-gradient(45deg, #000 0, #000 1em, transparent 1em, transparent 2em);
  opacity:.1;
  animation: stripes-move 1s infinite linear;
}
/* しましまアニメーション */
@keyframes stripes-move {
  100% {
    background-position: 3em 0px;
  }
}

/* ブログレスバーの色 */
.bg-info{
  background-color:#1CAF9A;
}
<section>
  <!-- 目標1 -->
  <div class="progress-title-box" style="margin-top:0;">
    <p class=" progress-title">目標1</p>
    <p class="item-right">2/5</p>
  </div>
  <div class="progress-thin-base">
    <div class="progress-bar bg-info" style="width:40%">
      <div v-if="stripes" class="progress-border"></div>
    </div>
  </div>
  <!-- 目標2 -->
  <div class="progress-title-box" style="margin-top:0;">
    <p class=" progress-title">目標2</p>
    <p class="item-right">17/18</p>
  </div>
  <div class="progress-thin-base">
    <div class="progress-bar bg-info" style="width:94%">
      <div v-if="stripes" class="progress-border"></div>
    </div>
  </div>
  <!-- 目標3 -->
  <div class="progress-title-box" style="margin-top:0;">
    <p class=" progress-title">目標3</p>
    <p class="item-right">11.5/35</p>
   </div>
  <div class="progress-thin-base">
    <div class="progress-bar bg-info" style="width:32.8%">
      <div v-if="stripes" class="progress-border"></div>
    </div>
  </div>
  <!-- 目標4 -->
  <div class="progress-title-box" style="margin-top:0;">
    <p class=" progress-title">目標4</p>
    <p class="item-right">1/4</p>
  </div>
  <div class="progress-thin-base">
    <div class="progress-bar bg-info" style="width:25%">
      <div v-if="stripes" class="progress-border"></div>
    </div>
  </div>
</section>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • m.ts10806

    2019/01/29 11:46

    ちなみにそのコメントアウト部分を除いただけの私の環境では2と3がはっきりと同現象が起きます。1と4も発生していないわけではないですが長さの関係からかハッキリとは見えません。

    キャンセル

  • SystemAjisai

    2019/01/29 12:00

    widthはプログレスバーの色が付いたところのwidthですよね。
    計算は仰られる通り、実績値/目標値(2/5とか)で計算しています。
    実際にはVue.jsのコンポーネントになっているので計算はJavascriptで行っていますが、掲示ソースのように固定値でやっても発生するので計算は関係ないと思ってソース掲示は除外しています。

    cssは// でコメントアウトできないんですね。lessと言うのを使っていて // でコメントアウトできていたのでcssも同じだと思ってました。
    修正しました。ご指摘ありがとうございました。

    キャンセル

  • SystemAjisai

    2019/01/29 12:08

    「長さの関係からハッキリ見えない」というコメントでこんなに長いのに???となってたのですが、プログレスバーのベース(グレーの部分)の幅自体がウインドウ幅に影響されるから、ウインドウ幅が狭いと見えないってことですね。
    試しにウインドウサイズを変えてみたら、どの目標値でも現象が発生しました。。。
    しましまdivの幅が起因しているってことですね。
    ずっと縞の幅とかばっかり気にしていたので考えてませんでした。
    ありがとうございました。

    キャンセル

回答 1

checkベストアンサー

+3

根本的解決になっていない対症療法。(Firefoxのデベロッパーツールでのみ確認)

.progress-border {
    width: 200%;
    margin-left: -100%;
}
.progress-bar {
    overflow: hidden;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/01/30 07:57

    I am sorry you don't get me?

    キャンセル

  • 2019/01/30 10:49

    編集履歴では確かに修正されているのに直っていないように見えますね

    キャンセル

  • 2019/01/30 11:57

    To: Stan_Dmaさん, x_xさん
    指摘ありがとうございます。teratailの保存バグでした。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.62%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る