來自jQuery，如何在React.js中做DOM動畫？如動畫進度條？

我幾個月來一直在使用React，並且我使用了大量的jQuery來處理DOM動畫/操作。我可以很好地處理操縱，但動畫化事情和做閃亮的UI東西似乎棘手的反應。或者至少不像jQuery那麼簡單。我不想拉動jQuery的動畫。來自jQuery，如何在React.js中做DOM動畫？如動畫進度條？

一些例子我想實現：

用戶向下滾動到我的技能我的個人投資組合頁面的部分，在那裏有一些引導進度條。一旦用戶滾動到他們，我將如何動畫這些欄以「填滿」。我想象一下檢測位置？我也可以建立自己的進度條，以便有更多的控制權。
當用戶調整我的投資組合部分的flexbox設置和代表我的項目的圖像時，我希望圖像緩慢地重新定位自己，就像一個轉換，而不是捕捉到他們的新位置。
或者簡單的東西就像有東西從左/右滑入？

我認爲jQuery寵壞了我！我只是覺得我沒有像React那樣控制太多。我曾看過渡組，但看起來相當有限。

這裏是我的進度條代碼有問題...

import React from 'react'; 

export default (props) => { 
const width = `${props.lvl}%` 

// setup diff colors for bars 
let backgroundColor = (function(lvl){ 
    if (lvl <=35) { 
     return '#ffa64d' 
    } 
    else if (lvl >= 36 && lvl <= 49) { 
     return '#ffff66' 
    } 
    else { 
     return '#47d147' 
    } 
}(props.lvl)) 

return (
    <div> 
     <h4 style={{display: 'inline'}}>{props.name}</h4> 
     <div className="progress"> 
      <div className='progress-bar' role="progressbar" aria-valuenow="70" 
      aria-valuemin="0" aria-valuemax="100" style={{width, backgroundColor}}> 
      </div> 
     </div> 
    </div> 
) 
}

來源

2016-05-02 MindfulBell

您可以使用[reactjs內嵌樣式]（https://facebook.github.io/react/tips/inline-styles.html）來動態計算進度條寬度。爲什麼不能使用css轉換爲您的動畫？ – Rison

你可以用新的百分比重新渲染組件... – falsarella

Rison，當然我想要使用CSS，但是因爲我必須檢測滾動位置（即當進度條部分在屏幕上時只動畫寬度），我無法弄清楚如何用CSS來做到這一點。我認爲這需要一些JS的權利？有隻用CSS的方法嗎？ – MindfulBell

我想大多數人都得到他們的動畫通過CSS轉換完成的;這是迄今爲止最簡單的方法。不過，我已經編寫了一個自定義模塊，該模塊提供了通過操作作爲組件狀態一部分存儲的內聯樣式來動畫元素的功能。你可以找到它here。你必須自己判斷這個麻煩是否值得這個功能。

來源

2016-05-03 10:16:12

來自jQuery，如何在React.js中做DOM動畫？如動畫進度條？

回答

相關問題