css動畫狀態欄不能從0加載到它的值

我想實現堆疊進度條的動畫，其中第一個將加載，然後第二個從第一個加載完成。這是我的CSS。每個狀態欄都是一個div，所有div都以一個大格子返回。任何想法我錯過了什麼？它不會從0到從右到左逐個加載進度條。感謝您的閱讀css動畫狀態欄不能從0加載到它的值

.terra-ProgressGroup { 
    flex: auto; 
    display: flex; 
    background: #d3d4d5; 
    flex-direction: row; 
    border-radius: 0.5em; 
    overflow: auto; 
    animation-delay: 3s; 
} 

.terra-ProgressGroup div { 
    transform: translateX(-100%); 
    animation: loadbar 3s forwards; 
    -webkit-animation: loadbar 3s forwards; 
    opacity: 0; 
} 

@keyframes loadbar { 
    0% { 
    opacity: 1; 
    } 
    100% { 
    transform: translateX(0); 
    opacity: 1; 
    } 
} 

.terra-ProgressGroup--progress { 
    // flex: 1 1 auto; 
    border-radius: 0em; 
    padding-right: 1px; 
    animation-delay: 3s; 
    // background-color: #ffffff; 
} 

.terra-ProgressGroup--progress:not(:first-child){ 
    // background-color: #ffffff; 
    // padding-right: 1px; 
}

渲染HTML：

<div><h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1><div class="space"><div> Example: User earning all the points</div><div class="terra-ProgressGroup"><!-- react-text: 94 --> <!-- /react-text --><div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 20%; height: 50px;"></div><div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 40%; height: 50px;"></div><div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept5 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><div class="well-background--concept6 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><!-- react-text: 101 --> <!-- /react-text --></div></div><div><div> Example: User earning 600 of 1000 points(50/150/300/100)</div><div class="terra-ProgressGroup"><!-- react-text: 105 --> <!-- /react-text --><div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 5%; height: 50px;"></div><div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 15%; height: 50px;"></div><div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 30%; height: 50px;"></div><div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div><!-- react-text: 110 --> <!-- /react-text --></div></div></div>

來源

2017-07-17 User7354632781

請提供您的'HTML'，如果可能，鏈接到您的運行代碼。 –

@AndyHoffman我正在使用一個反應組件。請檢查更新後的問題。創建一個div數組並將其傳遞給大格 – User7354632781

爲什麼不選擇一個解決方案來解決前一個問題？看起來你正在使用我給你的解決方案中的代碼。此外，您應該只發布呈現的HTML，您更有可能以這種方式獲得解決方案。只需帶上你的應用程序並複製開發工具中的html，以便我們有一個工作演示。 –

您只需給元素一個背景顏色，併爲每個小節點偏移animation-delay。您還需要使用負數z-index以保留之前的項目在後面的項目之上。

而對於白酒吧，你可以使用所有的酒吧的border-right但:last-child

.terra-ProgressGroup { 
 
    display: flex; 
 
    background: #d3d4d5; 
 
    flex-direction: row; 
 
    border-radius: 0.5em; 
 
    overflow: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
@keyframes loadbar { 
 
    0% { 
 
    opacity: 1; 
 
    } 
 
    100% { 
 
    transform: translateX(0) translate3d(0,0,0); 
 
    opacity: 1; 
 
    } 
 
} 
 

 
.terra-ProgressGroup--progress { 
 
    transform: translateX(-100%) translate3d(0,0,0); 
 
    animation: loadbar 3s linear forwards; 
 
    -webkit-animation: loadbar 3s linear forwards; 
 
    opacity: 0; 
 
    background: blue; 
 
} 
 

 
.terra-ProgressGroup--progress:not(:last-child) { 
 
    border-right: 1px solid white; 
 
} 
 

 
.well-background--concept2 { 
 
    background: blue; 
 
} 
 

 
.well-background--concept2 { 
 
    background: pink; 
 
    animation-delay: 3s; 
 
    z-index: -1; 
 
} 
 
.well-background--concept3 { 
 
    background: purple; 
 
    animation-delay: 6s; 
 
    z-index: -2; 
 
} 
 
.well-background--concept4 { 
 
    background: red; 
 
    animation-delay: 9s; 
 
    z-index: -3; 
 
} 
 
.well-background--concept5 { 
 
    background: green; 
 
    animation-delay: 12s; 
 
    z-index: -4; 
 
} 
 
.well-background--concept6 { 
 
    background: yellow; 
 
    animation-delay: 15s; 
 
    z-index: -5; 
 
}

<div> 
 
    <h1 class="u-pb--lg text-bold">Grouped ProgressBar Component Examples</h1> 
 
    <div class="space"> 
 
    <div> Example: User earning all the points</div> 
 
    <div class="terra-ProgressGroup"> 
 
     <!-- react-text: 94 --> 
 
     <!-- /react-text --> 
 
     <div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div> 
 
     <div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 20%; height: 50px;"></div> 
 
     <div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 40%; height: 50px;"></div> 
 
     <div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div> 
 
     <div class="well-background--concept5 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div> 
 
     <div class="well-background--concept6 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div> 
 
     <!-- react-text: 101 --> 
 
     <!-- /react-text --> 
 
    </div> 
 
    </div> 
 
    <div> 
 
    <div> Example: User earning 600 of 1000 points(50/150/300/100)</div> 
 
    <div class="terra-ProgressGroup"> 
 
     <!-- react-text: 105 --> 
 
     <!-- /react-text --> 
 
     <div class="well-background--concept1 terra-ProgressGroup--progress" style="width: 5%; height: 50px;"></div> 
 
     <div class="well-background--concept2 terra-ProgressGroup--progress" style="width: 15%; height: 50px;"></div> 
 
     <div class="well-background--concept3 terra-ProgressGroup--progress" style="width: 30%; height: 50px;"></div> 
 
     <div class="well-background--concept4 terra-ProgressGroup--progress" style="width: 10%; height: 50px;"></div> 
 
     <!-- react-text: 110 --> 
 
     <!-- /react-text --> 
 
    </div> 
 
    </div> 
 
</div>

來源

2017-07-18 13:35:56

是的「第一個將加載，然後第二個從第一個加載完成」，但現在我們有它的速度加快放緩。想要從左到右平滑地加載它們。 – User7354632781

@ User7354632781啊gotcha，默認動畫計時是'ease'我想，只要將其改爲'linear'，或者您可以將其更改爲https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timing-function更新了我的回答 –

再次感謝Michael Coker。學習很多好東西。我會玩那些動畫時機 – User7354632781

不知道你的目標是什麼效果了，但你有它設置了現在的樣子，所有的酒吧都有自己的最後的寬度就在一開始。使用transform：translateX（-100％）;只能按照自己的寬度移動右邊。

這就是爲什麼你看到第三個元素從加載欄的一半開始。

如果你想要酒吧開始0寬度和擴大，我會看看縮放。

來源

2017-07-18 08:43:11 JasperZelf

css動畫狀態欄不能從0加載到它的值

回答

相關問題