Question

如何在React中将HTML元素从div移动到另一个div元素。

当元素从一个div移动到另一个div时，我想要动画。如果可以，请提出步骤。

Answer 1

我的建议是

在您的react状态下创建一个布尔值，该元素应该位于该div中。
具有两个函数，如果布尔值为true，则返回一个元素，如果为false，则返回一个空div。然后制作一个相反的函数。
将它们拖放到相应的div中。
使函数附加到交换布尔值的事件上（无论是按钮，悬停还是其他）

如果您想花哨并且想要元素的实际动画移动，我建议做这样的事情：

#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;
    }
}

您可能需要调整位置和时间，但是类似这样的操作会使元素在React中创建后就开始移动。

有没有一种方法可以使用react将html元素从div移动到另一个div？

1 个答案: