admin管理员组文章数量:1332107
I'm trying to animate the elements of a menu with GSAP.
I'm using hooks like useRef
and it works fine with the <a>
elements which are links to an external website but not for the <Link>
elements for internal routes.
Menu:
<nav>
<ul>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)}
ref={line1} href="/nouveautes"> Nouveautés</Link>
</li>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line2} href="/catalogue"> Catalogue</Link>
</li>
<li>
<a
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line3}
href="/"> Diffusion</a>
</li>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line4}
href="/contacts"> Contacts</Link>
</li>
<li>
<a
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line5}
href=";amp;id=fa0ff0c34e"> Newsletter</a>
</li>
</ul>
</nav>
The GSAP functions:
const handleHover = e => {
gsap.to(e.target, {
duration: 0.3,
y: 3,
skewX: 4,
ease: 'power3.inOut'
});
};
const handleHoverExit = e => {
gsap.to(e.target, {
duration: 0.3,
y: -3,
skewX: 0,
ease: 'power3.inOut'
});
}
useRef:
let line1 = useRef();
let line2 = useRef();
let line3 = useRef();
let line4 = useRef();
let line5 = useRef();
I'm trying to animate the elements of a menu with GSAP.
I'm using hooks like useRef
and it works fine with the <a>
elements which are links to an external website but not for the <Link>
elements for internal routes.
Menu:
<nav>
<ul>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)}
ref={line1} href="/nouveautes"> Nouveautés</Link>
</li>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line2} href="/catalogue"> Catalogue</Link>
</li>
<li>
<a
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line3}
href="https://shop.paradisepapers.fr/"> Diffusion</a>
</li>
<li>
<Link
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line4}
href="/contacts"> Contacts</Link>
</li>
<li>
<a
onMouseEnter={e => handleHover(e)}
onMouseOut={e => handleHoverExit(e)} ref={line5}
href="https://cmeditions.us17.list-manage./subscribe/post?u=385cdf2c81c2f3bdd2ff1583e&id=fa0ff0c34e"> Newsletter</a>
</li>
</ul>
</nav>
The GSAP functions:
const handleHover = e => {
gsap.to(e.target, {
duration: 0.3,
y: 3,
skewX: 4,
ease: 'power3.inOut'
});
};
const handleHoverExit = e => {
gsap.to(e.target, {
duration: 0.3,
y: -3,
skewX: 0,
ease: 'power3.inOut'
});
}
useRef:
let line1 = useRef();
let line2 = useRef();
let line3 = useRef();
let line4 = useRef();
let line5 = useRef();
Share
Improve this question
edited Jan 23, 2021 at 19:57
Zsolt Meszaros
23.2k19 gold badges57 silver badges69 bronze badges
asked Jan 22, 2021 at 23:34
Rom-888Rom-888
8762 gold badges14 silver badges34 bronze badges
1 Answer
Reset to default 4next/link
ponent still requires you to pass a child element to it. You can add <a>
's as children to your <Link>
's, then apply the ref
and callbacks to them.
<nav>
<ul>
<li>
<Link href="/nouveautes">
<a onMouseEnter={e => handleHover(e)} onMouseOut={e => handleHoverExit(e)} ref={line1}>
Nouveautés
</a>
</Link>
</li>
<!-- remaining code -->
</ul>
</nav>
本文标签: javascriptCorrect way to use ref with Nextjs for a Link and an ltagtStack Overflow
版权声明:本文标题:javascript - Correct way to use ref with Next.js for a Link and an <a>? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742273178a2444692.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论