有没有办法使用反应将 html 元素从 div 移动到另一个 div？

Question

how to move a HTML element from a div to another div element in React.

I want an animation when an element moves from one div to another. If it can be done please suggest steps.

Answer 1

My suggestion would be

• Create a boolean in your react state for which div the element is supposed to be in.
• Make two functions, one that returns the element if the boolean is true and an empty div if it's false. Then make a function that does the opposite.
• Drop them into their appropriate divs.
• Make a function attached to an event that swaps the boolean (whether it's a button, or a hover or whatever)

If you want to get fancy and want an actual animation of the element moving, I'd suggest doing something like this:

#element{
animation: move 10s;
    -moz-animation: move 10s;
    /* Firefox */
    -webkit-animation: move 10s;
    /* Safari and Chrome */
    -o-animation: move 10s;
    /* Opera */

}

@keyframes move {
    0%{
      position: absolute;
      bottom: 20px;
     }
    50%{
      position: absolute;
      bottom: 80px;
    }

    100%{
        position: absolute;
        bottom: 140px;
    }

@-moz-keyframes move {
    /* Firefox */
     0%{
      position: absolute;
      bottom: 20px;
     }
    50%{
      position: absolute;
      bottom: 80px;
    }

    100%{
        position: absolute;
        bottom: 140px;
    }
}
@-webkit-keyframes move {
    /* Safari and Chrome */
     0%{
      position: absolute;
      bottom: 20px;
     }
    50%{
      position: absolute;
      bottom: 80px;
    }

    100%{
        position: absolute;
        bottom: 140px;
    }
}
@-o-keyframes move {
    /* Opera */
     0%{
      position: absolute;
      bottom: 20px;
     }
    50%{
      position: absolute;
      bottom: 80px;
    }

    100%{
        position: absolute;
        bottom: 140px;
    }
}

You might need to play around with the positioning and timing, but something like this can make an element start moving as soon as it's created in React.