jQueryのReact.jsでDOMアニメーションをどうやって作るのですか？進捗バーをアニメーション化するなど？

Question

私は数ヶ月間Reactを使用していましたが、私はDOMアニメーション/操作のために多くのjQueryを使用しました。私が扱う操作はかなりうまくいくが、アニメーションや光沢のあるUIの作業はReactでは難しいようだ。少なくとも、jQueryほど簡単ではありません。私はアニメーションのためにjQueryを取り入れたくありません。私が達成しようとしています

いくつかの例：一部のブートストラッププログレス・バーがあり、私の個人的なポートフォリオのページの私のスキルセクションまで

1. ユーザーがスクロールします。ユーザーが一度スクロールすると、これらのバーを「塗りつぶす」ようにどのようにアニメートしますか？私は位置を検出して何かを想像していますか？私は自分のプログレスバーを構築して、もっとコントロールすることもできました。

2. 自分のプロジェクトを表す画像でフレックスボックスを設定したポートフォリオセクションのサイズを変更すると、画像が移行のようにゆっくりと再配置され、新しい場所にスナップされないようにします。

3. 何かを左から/右からスライドさせるような簡単なことはありますか？

私はjQueryが私を台無しにしたと思います！私はリアクトでコントロールするほどの力がないように感じます。私はTransition Groupsを見てきましたが、かなり制限されているようです。ここで

は

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> 
) 
} 

Answer 1

は、私はほとんどの人がCSSトランジションを介して行わ自分のアニメーションを得ていると思う...プログレスバーの質問に対する私のコードです。それははるかに簡単な方法です。しかし、コンポーネント状態の一部として格納されたインラインスタイルを操作して要素をアニメーション化する機能を提供するカスタムモジュールを作成しました。あなたはそれを見つけることができますhere。あなたは、面倒な機能が価値あるものかどうかを自分で判断しなければなりません。