尽管具有有效的关键帧并正确设置了动画，但AnimatePresence无法在工具提示上工作

Question

我有一个自定义工具提示组件，如下所示：

const Tooltip = ({ visible, message }) => (
<div className='tooltip-wrapper'>
<AnimatePresence>
{visible && <motion.div className='tooltip'
key={message}
variants={tooltipFade}
initial='hidden'
animate='visible'
exit='exit'>
<p>{ message }</p>
</motion.div>}
</AnimatePresence>
</div>
)

动画是这样的：

export const tooltipFade = {
hidden: { y: 18 , opacity: 0 },
visible: { y: 0, opacity: 1, transition: { duration: 0.15, ease: 'easeOut' } },
exit: { y: 18, opacity: 0, transition: { duration: 0.15, delay: 1, ease: 'easeOut' } }
}

当鼠标进入带有工具提示的元素时，visible道具为true，当鼠标退出时，该道具变为false。虽然显示和隐藏动画按预期工作，但exit动画似乎不起作用，而是工具提示立即消失。有什么想法吗？

编辑：

这就是我对Tooltip的称呼。一个重要的警告是，我正在映射一个项数组，每个项都有一个Tooltip。当我将鼠标悬停在其中一个上时，我将showTooltip状态值设置为项目的名称(称为skill.name)，而不是true，并使用它来确定要显示哪个Tooltip。

const renderList = sortedList.map((skill) => (
<div className='skill' 
key={skill.name} 
alt={skill.name} 
aria-label={skill.name}
onMouseEnter={() => setShowTooltip(skill.name)}
onMouseLeave={() => setShowTooltip(false)}>
{skill.graphic}
<Tooltip visible={showTooltip === skill.name} message={skill.name} />
</div>
))

Answer 1

下面是一个正在工作的代码SandBox示例。如果您将鼠标悬停在Hover me to make the tooltip visible.文本上，则Tooltip组件是可见的，并且当您移除鼠标时，该组件会在1秒后消失，就像在tooltipFade中声明的那样。

问题的原因可能是在调用Tooltip组件时添加了用于渲染的可见标志。

{visible &&
<Tooltip
visible={visible}
message={"Some text"}
/>
}

如果是visible === false，它会立即隐藏组件，并且不允许动画运行。

我也不清楚，但我想您不需要key属性，因为文档中指出：

/**
* @internal You shouldn't need to use this type since you never see these attributes
* inside your component or have to validate them.
*/
interface Attributes {
key?: Key | null | undefined;
}

我的示例在没有key属性的情况下工作，因为文本是div的子级。