英文:
Framer Motion: When an element exits it briefly flashes in the centre of the screen despite keys
问题
我正在尝试使一个元素在从DOM中移除时平滑地淡入和淡出。进入效果很好，但当我动画退出时，该元素会短暂地闪出位置。
我认为这可能是一个关键问题，但我已将它们添加到所有涉及的元素中。
沙盒示例：https://codesandbox.io/s/green-snow-6n8x7f?file=/src/App.js
英文:
I'm trying to have an element animate smoothly in and out as it gets removed from the DOM. Entering is working well, but when I animate the exit, the element briefly flashes out of position.
I thought this may be a key problem, but I've added them to all elements involved.
Sandbox Example: https://codesandbox.io/s/green-snow-6n8x7f?file=/src/App.js
答案1
得分: 1
以下是翻译好的内容：
主要的问题在于你有一个mode="popLayout"，它会将元素从页面布局中移除，你可以想象它就像是position: absolute一样。但我也修复了一些其他的东西，比如移除了无用的属性（keys, layout），添加了正确的高度动画（我觉得你想要的是这个吧？），修复了p标签的边距（它们在动画中工作得不是很好）。
所以是的，只需移除mode="popLayout"并调整其余部分。
英文:
The main thing is that you had mode="popLayout" which removes the element from the page layout, basically you can imagine that it makes it as "position: absolute". But I also fixed some other stuff, like removed useless props (keys, layout), added correct height animation (I think you wanted it?), fixed p margins (they don't work very well with animations).
So yes, just remove mode="popLayout" and adjust the rest.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论