animation 的事件時間線

Question

賞金將在 6 天后到期。 此問題的答案有資格獲得+100聲望賞金。 dev正在尋找一個規范的答案。

我正在嘗試構建的是帶有一些 animation 的垂直時間線組件。 正在嘗試的 animation 是它從第一個圓圈開始，無論哪個項目的狀態為 true，垂直線將從上到下繪制，同時無論哪個步驟完成，當線穿過它時，將從圓形變為完成復選標記。

我怎樣才能在這個上面實現上面的animation，我到目前為止已經嘗試過，但不知道如何實現上面的。

我想達到什么目的

沙盒

任何幫助表示贊賞。

Answer 1

可以為背景設置動畫。 請檢查下面的示例

 .bg { min-height: 300px; width: 10px; background: linear-gradient(0, red, red) no-repeat; background-size: 100% 0; animation: gradient 15s ease infinite; } @keyframes gradient { 0% { background-size: 100% 0; } 100% { background-size: 100% 100%; } }

 <div class="bg"></div>

您的 TimelineConnector 可以更新為包含 CSS class。

Answer 2

您可以在高度為 0% 的灰線上方放置一條綠線，並使用 animation 使其增長到 100%。 然后使用一點javaScript (jQuery) ，您可以啟動 animation，將 class 添加到該行。 與綠色圓圈相同（在這種情況下，延遲將 class 添加到圓圈以更改縱橫比，與您在 animation 中設置的時間相同。）

像這樣：

 $('button').click(function(){ $('.line2').addClass("animation"); setTimeout( function() { $('.circle').addClass("circlegreen"); }, 1500); });

 .circle { height:30px; width:30px; border-radius:50%; border:8px solid #ddd; }.line { height:90px; width:8px; background-color:#ddd; margin-left:19px; position:relative; }.circlegreen { background-color:green; border:8px solid green; }.animation { animation-name:timeline; animation-duration:1.5s; animation-iteration-count:1; animation-fill-mode:forwards; animation-timing-function:linear; position:absolute; top:0; left:0; width:100%; height:0%; background-color:green; } @keyframes timeline { from {height:0%;} to {height:100%;} }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <button>Click</button> <div class="circle circlegreen"></div> <div class="line"> <div class="line2"></div> </div> <div class="circle"></div>

我添加了一個按鈕來啟動 animation。

Answer 3

從 Material UI 中查看Vertical Stepper

Answer 4

你可以試試這個

 /* timeline css */ @keyframes fill-color { 0% { height: 0; } 100% { height: 100%; } } @keyframes fill-color1 { 0% { height: 0; } 100% { height: 50%; } } @keyframes scaleup { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes fade { 0% { color: rgba(black, 0.4); } 100% { color: rgba(black, 1); } } body { margin: 0; padding: 0; }.timeline { padding: 0; list-style: none; margin: 32px; overflow: hidden; position: relative; }.details { margin-left: 48px; border-bottom: 1px solid #f2f2f2; min-height: 85px; display: flex; justify-content: center; flex-direction: column; }.list, .list-content { position: relative; width: 100%; }.list-content::before, .list-content::after { content: ""; display: block; position: absolute; left: 0; transition: 0.2s all linear; width: 0.714rem; height: 0.714rem; border-radius: 50%; background-color: gray; top: 50%; z-index: 3; margin-left: 0.35rem; margin-top: rem(-8px); }.list-content::after { z-index: 2; }.list { position: relative; width: 100%; }.list.active.list-content:before { transform: scale(0); width: 17px; height: 17px; border: 2px solid white; background-color: red; background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/White_check.svg/2048px-White_check.svg.png"); background-position: center; background-repeat: no-repeat; background-size: 9px 7px; margin-left: 0; margin-top: -8px; animation: scaleup 0.4s forwards; }.list:before, .list:after { content: ""; display: block; position: absolute; left: 0; transition: 0.2s all linear; width: 0.214rem; margin-left: 0.6rem; }.list:before { background: #f2f2f2; height: 100%; }.list:after { background: red; height: 0; z-index: 1; }.list:before { top: -50%; }.list.active:after { top: 0; animation: fill-color 0.4s forwards; }.list:last-child:after { display: none; }.list:last-child.active:after { display: block; bottom: 50%; animation: fill-color1 0.4s forwards; }.list:last-child.details { border-bottom: none; }.list:first-child:before { display: none; }.list:first-child.active:after { animation: fill-color1 0.4s forwards; top: 50%; }.list:first-child.active:after { animation-delay: 1s; }.list:first-child.active.list-content:before { animation-delay: 0.5s; }.list:nth-child(2).active:after { animation-delay: 2s; }.list:nth-child(2).active.list-content:before { animation-delay: 2s; }.list:nth-child(3).active:after { animation-delay: 3s; }.list:nth-child(3).active.list-content:before { animation-delay: 3s; }.list:nth-child(4).active:after { animation-delay: 4s; }.list:nth-child(4).active.list-content:before { animation-delay: 4.15s; }

 <body> <ul class="timeline"> <li class="list active"> <div class="list-content"> <div class="details"> <h4 class="status-title">Step 1</h4> </div> </div> </li> <li class="list active"> <div class="list-content"> <div class="details"> <h4 class="status-title">Step 2</h4> </div> </div> </li> <li class="list active"> <div class="list-content"> <div class="details"> <h4 class="status-title">Step 3</h4> </div> </div> </li> <li class="list active"> <div class="list-content"> <div class="details"> <h4 class="status-title">Step 4</h4> </div> </div> </li> </ul> </body>

你也可以檢查沙盒

在這里，我在所有li元素中添加了active class 但如果你想激活兩個步驟，那么只應用前兩個 li（即 class 是有條件的）

Answer 5

我已經修改了您的沙箱以使其正常工作： https://codesandbox.io/s/animable-timeline-reactjs-tiofz

1. 對於 animation，我使用了以下 CSS：

    div { height: 200px; width: 10px; }.green-progress { background: linear-gradient(0, #00a36c, #00a36c) no-repeat, #ccc; background-size: 100% 0; animation: progressAnim 3s linear infinite forwards; } @keyframes progressAnim { 0% { background-size: 100% 0; } 100% { background-size: 100% 100%; } }

    <div class="green-progress"></div>

   
   為了動畫實際時間線，我們將從第一個條目中刪除垂直條，並且只有選中的圓圈。 從第二個條目開始，我們將有一個垂直條和選中的圓圈。 為了使它們保持一致，它們已向上移動。 為了顯示進度，該條將填充，然后將檢查圓圈。

2. 將App轉換為有狀態組件，以便我們可以維護 animation 狀態。 在構造函數中，為每個條目添加id 、 startAnim並checked state。 在這里，我們將設置startAnim標志以在相應的 TimelineConnector 上啟動 animation。 和checked用於控制檢查標記圓圈。

3. 如果this.props.startAnim為 true，則在TimelineConnector中將 class 設置為 green-progress。 還添加了onAnimationEnd處理程序作為{() => this.props.onAnimDone(this.props.id)} 。 這告訴 App 組件 animation 已在此組件上使用id完成。

4. 在TimelineDot中使用props.event.checked設置檢查狀態。

5. 在 App 中添加了一個生命周期鈎子componentDidMount ，當所有組件都添加到實際 DOM 時，它會被調用。 在鈎子中選中第一個圓圈並在第一個 TimelineConnector 上啟動 animation。

6. 當 TimelineConnector 完成 animation 后，它會在 App 中調用startNextAnim 。 在該方法中，您首先完成最后一個條目的復選標記。 如果條目具有status:true ，則開始下一個 animation 。

我們可以為每個 animation 添加延遲並立即運行它們。 但是當 animation 完成時，父控制每個組件和每個組件通知使得更新代碼更加靈活。 您可以根據 state 為每個條目設置不同的動畫。

我們可以使用 react-spring animation 庫，但事情會變得復雜。 CSS animation 是最簡單的解決方案。

Answer 6

從個人經驗來看，我建議您先查看 CSS 中的通用 animation。 這是一個可以幫助您了解基礎知識和一些高級內容的頁面

這一頁