英文:
Why is my framer motion h1 component offset in my React project?
问题
在我的 h1 上使用 Framer Motion 时，我遇到了一个问题。
在 CSS 中，我将这个 h1 居中，并且在动画中没有改变 x 坐标，但出现了右偏的情况。
我不知道这是否重要，但我也安装了 Bootstrap。
[使用 Framer Motion 的情况 (图片链接)](https://i.stack.imgur.com/tuczv.png)
[使用普通 h1 的情况 (图片链接)](https://i.stack.imgur.com/ittdo.png)
我尝试过删除整个标题，然后保存，再重新写入，但没有起作用。
英文:
So i have a problem when i use framer motion on my h1
import { motion } from "framer-motion";
function FirstPage() {
return (
<motion.h1
initial={{ opacity: 0, scale: 0.5, y: -100, x: -100 }}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.8,
delay: 0.5,
ease: [0, 0.71, 0.2, 1.01],
}}
>
Tehauto
</motion.h1>
);
}
In css i center this h1 and in the animation i do not change the x coordinate
but for some reason it is offset to the right
Idk if it matters but i have bootstrap installed also
with framer motion (picture link)
when i use regular h1 (picture link)
I tried to delete the entire heading and then save and then rewrite it again but it didnt work
答案1
得分: 0
I tried to solve your all issues!!
Idk if it matters but I have bootstrap installed also
这不重要，是否安装了bootstrap(样式也可以被覆盖)。
主要是你需要创建一个div并将其包装，还需要在h1和div中使用内联样式。
你可以这样做：
//...
<div
style={{
height: '0px',
width: '100px',
top: '200px',
color: 'white',
left: '40%',
position: 'relative',
}}
>
<motion.h1
initial={{
left: -30,
position: 'relative',
opacity: 0,
scale: 0.5,
y: -100,
}}
style={{
fontSize: '80px',
visibility: 'visible',
}}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.8,
delay: 0.5,
ease: [0, 0.71, 0.2, 1.01],
}}
>
Tehauto
</motion.h1>
</div>
//...
这里是更新的示例链接。
你可以自己尝试一下。
希望这有所帮助！
英文:
I tried to solve your all issues!!
> Idk if it matters but I have bootstrap installed also
It doesn't matter whether you have installed bootstrap(styling can also be overridden well).
The main thing is that you need to create div & wrap it, also use inline styling in both h1 & div.
like this you can do it:
//...
<div
style={{
height: '0px',
width: '100px',
top: '200px',
color: 'white',
left: '40%',
position: 'relative',
}}
>
<motion.h1
initial={{
left: -30,
position: 'relative',
opacity: 0,
scale: 0.5,
y: -100,
}}
style={{
fontSize: '80px',
visibility: 'visible',
}}
animate={{ opacity: 1, scale: 1 }}
transition={{
duration: 0.8,
delay: 0.5,
ease: [0, 0.71, 0.2, 1.01],
}}
>
Tehauto
</motion.h1>
</div>
//...
Here is the update example link.
You can mess around with it.
I hope this helps!
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论