时间戳

首页 > 解决方案 > React js问题图像部分粘贴以强调它

javascript - React js问题图像部分粘贴以强调它

问题描述

嗨，伙计们，我被困在一项任务中，我必须在单击转换延迟时将一个元素从一个 div 移动到另一个（动画是第二优先级）。

在页面底部我有 3 个图标，一旦我点击最左边的图标，就会出现一个带有自动对焦的输入框，可以在移动设备中打开键盘

那么如何在点击时将图标从初始 div 移动到输入框 div？

注意：在桌面电脑键盘不会弹出，但基本想法是在输入框div内发送带有一点动画的麦克风图标，所以无论输入框放在屏幕上的哪个位置，麦克风图标都应该在那里

标签： javascripthtmlcssreactjs

解决方案

基本方法：

您应该删除这部分逻辑：（ showInput && <Home ...或将导航栏移到 Home 组件之外。这取决于您）然后您可以为您的 CSS 类创建一个修饰符，称为.mic，例如：.mic--active。接下来，您应该将isActive={showInput}prop 传递给 Home 组件。这样，如果按钮应该处于活动状态，您将获得信息。

还有一些 CSS 魔法：

.mic {
  position: fixed;
  bottom: 0;
  z-index: 2;
}

.mic--active {
  right: 0;
}

我知道这并不完美；）。您可以稍后改进样式。

更复杂的方法：

您可以使用 Framer Motion 插件：https ://www.framer.com/motion/

我认为这个库中的共享布局非常适合这种情况： https ://www.framer.com/api/motion/animate-shared-layout/#animate-between-components

推荐阅读