JavaScript implements smooth transition from thumbnail to full-width image page-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

JavaScript implements smooth transition from thumbnail to full-width image page

P粉536532781 2023-09-15 22:09:37

809

http://manifesto.clapat.com/

If you click on any item on the homepage, you will transition from a thumbnail to a full-screen image that will become the title of that item's page. How are these transition effects created and what would be the best way to implement them using internal routing rather than React Router, but if anyone can make it work with React Router I can port that as well.

There are some tutorials available, but they all load data on the same page, similar to a full screen modal component, rather than going to another/project page. The main goal is to transition to other pages while keeping the image as loading.

P粉536532781

reply all (1)

P粉6775730792023-09-16 17:02:34 1 floor

You need server-side rendering to achieve this effect, because the normal rendering method will not start loading the image until you jump to the page. In Next.js, all pages accessed through the Link element are pre-rendered as long as you are on the page that contains theelement pointing to that page.

In order to achieve this effect, first you need to set the position of the image to fixed in CSS, then create a transition effect, scale the image to width: 100% and height: 100%, set the transition time to 500 milliseconds, and You need to set a timer to automatically jump to the next page that has an image as the background after the transition ends. I don't know if you need to do this, but include asomewhere so that the page will be pre-rendered and the image will load immediately when routed to the page.

First page:

const router = useRouter(); const [transitionStarted, setTransitionStarted] = useState(false); function handleClick() { setTransitionStarted(true); setTimeout(() => { router.push("/next-page"); }, 500) } return (   
            "}`} onClick={handleClick}> src="path-to-image" fill alt="image link" />  )

return (   
 )

I wrote this example in tailwindcss to make it more readable, but you can achieve the same effect in any other CSS library. To make the transition smooth, you just need to set the transition duration and the duration of setTimeout to the same, so that the page will only redirect when the transition is complete and the images on both pages are exactly the same.

Hope I gave you the answer you needed. If you need to see what the classes in the example do, you can view thetailwindcss documentation.