来自jQuery，如何在React.js中制作DOM动画？ 如动画进度条？

Question

I have been using React for a couple months now and I came from using a lot of jQuery for DOM animations/manipulation. The manipulations I can handle pretty well but animating things and doing shiny UI stuff seems tricky in React. Or at least, not as easy as jQuery. I don't want to pull jQuery in for animations.

Some examples I am trying to achieve:

1. User scrolls down to my skills section of my Personal Portfolio Page where there are some Bootstrap progress bars. How would I animate these bars to 'fill up' once the user scrolls to them. I imagine something with detecting position? I could also build my own progress bars so as to have more control.

2. When the user resizes my portfolio section that has a flexbox setup with images that represent my projects, I want the images to reposition themselves slowly, like a transition and not snap to their new spot.

3. Or something simple like have something slide in from the left/right?

I think jQuery spoiled me! I just feel like I don't have as much as control in React. I have looked at Transition Groups but that seems pretty limited.

Here is my code for the progress bar question...

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

I think most people have gotten their animations done through CSS transitions; it's by far the easiest way. However, I have written a custom module that provides functionality that animates elements through manipulation of inline styles stored as part of component state. You can find it here . You'll have to judge for yourself whether the hassle is worth the functionality.