React Animation for Moving an Element from One Parent to Another

React animation for moving an element from one parent to another

No it's not possible

It's not possible to animate in that way because the DOM thinks you're removing a div and then adding a new div. Even though it's the same div to you, the DOM doesn't have that context. Animations are controlled by changes to CSS, not HTML.

...but here's how to do it

If you actually need both lists to stay in different divs the best you can do is either:

1. Animate the old item to the new item position, then delete the old item and show the new item.
2. Remove the old item and create a new item where the old item was and move it to the new item position.

Same concept, two ways of doing it.

I modified your existing sample to show a simplified version of option 2. Note that there are a number of animation decisions to make like what happens when the list gets smaller, how should the items change from red to green, etc., and I didn't try and objectively solve them. Also, this would be much easier if you could have all the items for both lists in one div, and control their positions absolutely. But if they need to end up in separate divs...

https://codepen.io/sallf/pen/VgBwQr?editors=0010

What's going on

1. Adding a transition to .item we can make the animation happen when we make adjustments to the transform property.
2. On item click we update our lists in state and add...
3. transition.item to know which item is animating...
4. transition.startTop to know the offset y position the item should start at relative to the bottom of the list it's moving to, and...
5. transition.startAnim as a flag to control the animation.
6. Since transitions need something to change before they'll animate, we use setTimeout to delay the change of transition.startAnim which basically causes the animation from the computed position, back to 0.

React - animate mount and unmount of a single component

This is a bit lengthy but I've used all the native events and methods to achieve this animation. No ReactCSSTransitionGroup, ReactTransitionGroup and etc.

Things I've used

• React lifecycle methods
• onTransitionEnd event

How this works

• Mount the element based on the mount prop passed(mounted) and with default style(opacity: 0)
• After mount or update, use componentDidMount (componentWillReceiveProps for further updates)to change the style (opacity: 1) with a timeout(to make it async).
• During unmount, pass a prop to the component to identify unmount, change the style again(opacity: 0), onTransitionEnd, remove unmount the element from the DOM.

Continue the cycle.

Go through the code, you'll understand. If any clarification is needed, please leave a comment.

class App extends React.Component{
  constructor(props) {
    super(props)
    this.transitionEnd = this.transitionEnd.bind(this)
    this.mountStyle = this.mountStyle.bind(this)
    this.unMountStyle = this.unMountStyle.bind(this)
    this.state ={ //base css
      show: true,
      style :{
        fontSize: 60,
        opacity: 0,
        transition: 'all 2s ease',
      }
    }
  }
  
  componentWillReceiveProps(newProps) { // check for the mounted props
    if(!newProps.mounted)
      return this.unMountStyle() // call outro animation when mounted prop is false
    this.setState({ // remount the node when the mounted prop is true
      show: true
    })
    setTimeout(this.mountStyle, 10) // call the into animation
  }
  
  unMountStyle() { // css for unmount animation
    this.setState({
      style: {
        fontSize: 60,
        opacity: 0,
        transition: 'all 1s ease',
      }
    })
  }
  
  mountStyle() { // css for mount animation
    this.setState({
      style: {
        fontSize: 60,
        opacity: 1,
        transition: 'all 1s ease',
      }
    })
  }
  
  componentDidMount(){
    setTimeout(this.mountStyle, 10) // call the into animation
  }
  
  transitionEnd(){
    if(!this.props.mounted){ // remove the node on transition end when the mounted prop is false
      this.setState({
        show: false
      })
    }
  }
  
  render() {
    return this.state.show && <h1 style={this.state.style} onTransitionEnd={this.transitionEnd}>Hello</h1> 
  }
}

class Parent extends React.Component{
  constructor(props){
    super(props)
    this.buttonClick = this.buttonClick.bind(this)
    this.state = {
      showChild: true,
    }
  }
  buttonClick(){
    this.setState({
      showChild: !this.state.showChild
    })
  }
  render(){
    return <div>
        <App onTransitionEnd={this.transitionEnd} mounted={this.state.showChild}/>
        <button onClick={this.buttonClick}>{this.state.showChild ? 'Unmount': 'Mount'}</button>
      </div>
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

What's a react.js-friendly way to animate a list-reordering?

I just released a module to tackle exactly this problem

https://github.com/joshwcomeau/react-flip-move

It does a few things differently than Magic Move / Shuffle:

1. It uses the FLIP technique for hardware-accelerated 60FPS+ animations
2. It offers options to "humanize" the shuffle by incrementally offsetting delay or duration
3. It handles interruptions gracefully, no weird glitch effects
4. Bunch of other neat stuff like start/finish callbacks

Check out the demos:

http://joshwcomeau.github.io/react-flip-move/examples/#/shuffle

How to animate the disappearance of a component in ReactJS?

TLDR

As far as I know there is onAnimationStart, onAnimationEnd in React

Answer

You can use onAnimationStart, onAnimationEnd synthetic event listener and some props like isShowComponent, isHideComponent

And you can use unmountComponentAtNode(), findDOMNode() in react-dom

Peseudo Code

   handleAnimationEnd() {
     const node = ReactDom.findDOMNode(this);
     ReactDom.unmountComponentAtNode(node)
   }
   ...
   render(){
     return (
        <div onAnimtionEnd={this.handleAnimationEnd}>
        /** some code**/
        </div>
     )
   }

ETC

It is not real code but just peseudo! but I think you can do that using this api and event handler!

Good luck!

If you have any good solution. just hit me with comment!

It should be helpful to other developer struggling with this issue

Reference

1. React Document
2. React Dom Document
3. code sandbox exmaple
4. How to Trigger Animation Events using React

move an element from one div to another div with animate effect on button click using html and jquery

Got it working, here is the fiddle

http://jsfiddle.net/h7tuehmo/3/

Javscript:

var x;
var y;
$('article').each(function(index){
    $(this).click(function(){
        $(this).addClass('selected') ;
        x = $(this).offset().left;
        y = $(this).offset().top;
    })
    });

$('img').each(function(index){
    var xi = $(this).offset().left;
    var yi = $(this).offset().top;
    $(this).css('left', xi).css('top', yi);
    $(this).click(function(){
         $(this).animate({
    left: x,
    top: y
         })
    })

});

Picture animation in React

The problem I see with the code that you are directly mutating the state. You should never mutate state and props directly. Use prevState in the moveDown function to update the state. Please read about the updater function from react docs

this.setState(prevState => {
    const { top, rear, transition } = prevState;
    return {
      top: top.filter(x => x !== item),
      rear: [...rear, item],
      transition: {
        ...transition,
        item,
        startTop: itemTop / 5,
        startAnim: false
      }
    };
  });

Similarly in you resetState function, the state it being mutated. Change it to :

  resetState = () => {
    this.setState(
      prevState => ({
        transition: { ...transition, startAnim: true }
      }),
      () => {
        console.log("setState finished");
      }
    );
  };

---

Related Topics