我的問題相當簡單，但我正在努力尋找解決方案。在這里，我試圖為句子中的每個字母創建一個驚人的影片，我想使用 y 軸作為影片的引數，但我沒有得到我想要的結果，因為句子完全安裝而沒有影片。但是當我嘗試使用不透明度作為引數時，它作業得很好。我在這里做錯了什么？任何幫助，將不勝感激 ：）
// import "./styles.css";
import { motion } from "framer-motion";
export default function App() {
const quotes = "Hello World.";
const parent = {
animate: {
transition: {
staggerChildren: 0.1,
},
},
};
const child = {
initial: { y: 400 },
animate: {
y: 0,
},
};
return (
<div>
<motion.div variants={parent} initial='initial' animate='animate'>
{
quotes.split('').map((item, index) => (
<motion.span variants={child} key={index}>{item}</motion.span>
))
}
</motion.div>
</div>
);
}
為了幫助您了解我的問題，這里是代碼和框示例 https://codesandbox.io/s/busy-mountain-fv58xc?file=/src/App.js:0-620
uj5u.com熱心網友回復：
影片x并且y不起作用，<span>因為它是和行內元素。它與內容一起流動，沒有明確x的y影片位置。
您可以將跨度更改為塊級元素（如div），或者您可以添加一些樣式來告訴跨度顯示為塊：
<motion.span style={{display: "inline-block"}} variants={child} key={index}>
{item}
</motion.span>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/437534.html
上一篇：如何重復Android影片