基于媒体查询的React Spring动画/过渡
提问于 2020-09-26 16:40:48
我已经很好地完成了这个React Spring转换：
const Nav = () => {
const[showMenu, setShowMenu] = useState(false)
const navbgTransitions = useTransition(showMenu, null, {
//FROM
from: {
opacity: 1, position:'absolute', transform: 'translateX(225px)',
},
//ENTER
enter: {
opacity: 1, transform: 'translateX(0)'
},
//LEAVE
leave: item => async (next, cancel) => {
await new Promise(resolve => setTimeout(resolve, 500));
await next({ opacity: 1, transform: 'translateX(225px)' })
},
})
})
return (
<>
{
navbgTransitions.map(({ item, key, props }) =>
item &&
<animated.div key={key} style={props} className="background">
<ul>
<Link onClick={() => setShowMenu(false)} to="/" exact><li>Home</li></Link>
<Link onClick={() => setShowMenu(false)} to="/about"><li>About</li></Link>
<Link onClick={() => setShowMenu(false)} to="/work"><li>Work</li></Link>
<Link onClick={() => setShowMenu(false)} to="/hire"><li>Hire Me</li></Link>
</ul>
</animated.div>
)
}
</>
);
export default Nav;我已经决定，我真的想让动画在较小的设备上以不同的方式工作。我想知道，有没有一种方法可以复制const navbgTransitions，然后在它们周围包装单独的React媒体查询，并设置from、enter和leave动画根据视口宽度的不同而播放不同的动画？
基于我对React/Javascript的理解，我已经做了尽可能多的研究，目前我很想切换到react-transition-group，因为(根据我所读的)它允许基于样式表的动画。
我是个新手，所以如果能给我一点指导，我将不胜感激！
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-03 09:09:21
是的，useMediaQuery from Material-ui可以用来相应地确定视口宽度，
const matches = useMediaQuery('(min-width:600px)');然后可以在您定义的状态中使用匹配，以进行转换，例如，在移动设备上使用translateY而不是translateX (或您希望它为您做的任何事情)，
from: {
opacity: 1,
position:'absolute',
transform: matches ? 'translateX(225px)' : 'translateY(50px)',
},页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64080155
复制相关文章
点击加载更多
腾讯云开发者
