Independent Development
The position of Modal components in React
Error
I use Framer Motion to show a modal component. Framer Motion adds a little animation to the modal while showing, but the position of modal is odd.
It shows half on the bottom of the screen。
Solution
While using Framer Motion for animation, the transform of Tailwind CSS should not be used. They would conflict.
Putting all the position related part into Framer Motion is better (my animation was position related) .
Also, in my experience, the position of the modal is related to where it was called, which means the position of its parent components.
So it is better to put all modal components in the same place, and transfer data through Context or Redux.
Well, my modals has not been set properly yet…:-(
Main Site(Under building)
Related Platforms
(Github Issues) / (Notion) / (Blog)
Advertisement
(A website to optimize your resume and to boost your career: Nonpareil.me)
独立开发
React 中 Modal形式组件的显示位置
问题
我使用了Framer Motion来给我的modal组件添加显示动画，不过组件的显示位置很奇怪，只在屏幕下方显示出了一半。
解决方案
在使用Framer Motion添加动画时，最好不要同时使用Tailwind CSS的transform属性。两者会有冲突。
因为我的动画效果和位置有关，所以最好让Framer Motion 处理所有位置相关的内容。
另外在我的经验里，Modal组件显示在哪里，和它在哪里被定义有关，也就是可能和父容器的位置有关。
所以最好把所有modal组件定义在同一个位置，然后通过Context或者Redux传递数据。
我自己的modal组件也还没完全调整好……:-(
主站（建设中）
[Nonpareil Me]{https://nonpareil.me}
相关平台
(Github Issues) / (Notion) / (Blog)