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

Question

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

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

Answer 1

我的建议是

• 在您的反应 state 中创建一个 boolean 元素应该在哪个 div 中。
• 创建两个函数，一个在 boolean 为真时返回元素，如果为假则返回空 div。 然后做一个相反的 function。
• 将它们放入适当的 div 中。
• 将 function 附加到交换 boolean 的事件（无论是按钮，还是 hover 或其他）

如果您想花哨并想要一个实际的 animation 元素移动，我建议您这样做：

#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 中创建后立即开始移动。