目前,我正尝试在一个有几颗流星飞过屏幕的页面上添加一个动画。我希望星星在可用屏幕的一定百分比处出现和结束,以使其在任何设备上都能响应和可见。然而,当我尝试这样做时,我的值看起来默认为0px,而不是我从React组件传递到tailwind.config.js
的百分比。2如果我传递像素,这些值就起作用,但正如我提到的,我宁愿做百分比,这样它就可以在任何屏幕上很好地工作。
目前,我正在使用this method传入所需的百分比值,并做了一些修改,使其与React兼容,如下所示:
style={{"--startingX":props.startingX}}
我目前正在使用NextJS和TailwindCSS来尝试做这个。
以下是(我认为是)相关文件:/components/shootingStar.js
export default function ShootingStar(props) {
return (
<div>
<div style={{"--percentage":props.startingX}} className="absolute animate-star">
<div className="transform absolute top-2/4 ..."></div>
<div className="absolute top-full left-2/4 ..."></div>
</div>
</div>
)
}
动画:"星"是动画的问题,里面的关键帧我创建了我的自定义动画。tailwind.config.js
:
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {
fontFamily: {
'Quicksand': ['Quicksand', ...defaultTheme.fontFamily.sans],
},
'animation': {
...
star : "star 3s linear infinite"
},
'keyframes': {
...
star: {
'0%' : {
transform : 'translateX(var(--percentage)) translateY(0px) rotate(235deg)',
'opacity': '50%'
},
'75%' : {
'opacity' : '100%'
},
'100%' : {
transform : 'translateX(350px) translateY(500px) rotate(235deg)',
'opacity' : '0%'
}
}
}
},
},
plugins: [],
}
index.js
return (
//This div is the parent div to the whole page which is why I included it.
<div className="bg-gradient-to-tl from-blue-900 to-black overflow-x-auto h-screen w-screen ">
<ShootingStar startingX={'25%'} startingY={'25%'} endingX={'500px'} endingY={'500px'}</ShootingStar>
{The remaining shooting stars would eventually get created here}
</div>
...
)
当动画为0%时,我希望星形组件从屏幕的指定X %开始(例如,如果我将25%传递给我的百分比变量,我希望它从窗口左侧进入屏幕的1/4处开始)。
如果这是可能的,我计划扩展它的起始Y值和X & Y的结束值,这就是为什么我有这些 prop 传入。
如果我将25%传递给我的百分比变量,我的起始值在屏幕的左上角(或0),并允许动画运行。如果我试图将百分比值硬编码到我的关键帧动画中,动画不会发生,因为所有的值在技术上都默认为0。
我期待动画开始在1/4的方式从左手边。
我觉得好像我做了一些轻微的错误,将不允许我使这个动画可能,但我不完全确定这将是什么。
1条答案
按热度按时间nhaq1z211#
经过进一步的研究,我终于明白了为什么我的动画卡在左上角了。关键帧动画采用了正在动画的组件的高度和宽度规范,而不会继承其父组件的高度或宽度(我最初认为它们会继承)。因为我没有为我的组件指定高度或宽度,所以它不能像我最初希望的那样在屏幕上移动。
对于像我一样遇到这种情况的人,请确保您设置组件的高度和宽度,以允许动画通过组件。否则,如果您希望动画通过整个视口,请在设置动画值时使用
vh
而不是%
。无论如何,我决定选择viewport,因为它更适合我的用例。