Next.js View Transitions ใช้ยังไง? พร้อมตัวอย่างจริง

1
next.config.ts

1
import type { NextConfig } from 'next';
2

3
const nextConfig: NextConfig = {
4
  experimental: {
5
    viewTransition: true,
6
  },
7
};
8

9
export default nextConfig;

1
template.tsx

1
import { ViewTransition } from 'react';
2

3
interface TemplateProps {
4
  children: React.ReactNode;
5
}
6

7
const Template: React.FC<TemplateProps> = ({ children }) => {
8
  return (
9
    <ViewTransition default="page-transition">
10
      {children}
11
    </ViewTransition>
12
  );
13
};
14

15
export default Template;

1
globals.css

1
::view-transition-group(.page-transition) {
2
  animation-duration: 500ms;
3
}
4

5
::view-transition-old(.page-transition) {
6
  animation: page-out 500ms ease;
7
}
8

9
::view-transition-new(.page-transition) {
10
  animation: page-in 500ms ease;
11
}
12

13
@keyframes page-out {
14
  from {
15
    opacity: 1;
16
    transform: scale(1);
17
    filter: blur(0);
18
  }
19

20
  to {
21
    opacity: 0;
22
    transform: scale(0.98);
23
    filter: blur(8px);
24
  }
25
}
26

27
@keyframes page-in {
28
  from {
29
    opacity: 0;
30
    transform: scale(0.98);
31
    filter: blur(8px);
32
  }
33

34
  to {
35
    opacity: 1;
36
    transform: scale(1);
37
    filter: blur(0);
38
  }
39
}

1
import { ViewTransition } from 'react';

1
<ViewTransition
2
  name={`blog-image-${item.fields.slug}`}
3
  share="blog-image"
4
  default="none"
5
>
6
  <div className="blog-image-container w-full overflow-hidden">
7
    {thumbnail && (
8
      <Image
9
        key={thumbnail.url}
10
        src={thumbnail.url}
11
        alt={item.fields.title}
12
        width={thumbnail.width}
13
        height={thumbnail.height}
14
        className="blog-image max-h-[30vmin] object-cover group-hover/blog:scale-110 transition-transform duration-500"
15
      />
16
    )}
17
  </div>
18
</ViewTransition>

1
import { ViewTransition } from 'react';

1
<ViewTransition
2
  name={`blog-image-${blog.fields.slug}`}
3
  share="blog-image"
4
  default="none"
5
>
6
  <Image
7
    src={thumbnail?.url}
8
    alt={blog.fields.title}
9
    width={thumbnail?.width}
10
    height={thumbnail?.height}
11
    preload
12
    sizes="(max-width: 1024px) 100vw, 1024px"
13
    fetchPriority="high"
14
    loading="eager"
15
    className="blog-thumbnail object-cover"
16
  />
17
</ViewTransition>

1
import { ViewTransition } from 'react';

1
<ViewTransition
2
  name={`blog-title-${blog.fields.slug}`}
3
  share="blog-title"
4
  default="none"
5
>
6
  <h1
7
    className="blog-title text-balance font-bold font-noto-sans-thai-looped text-3xl"
8
    style={{
9
      viewTransitionName: `blog-title-${blog.fields.slug}`,
10
      viewTransitionClass: 'blog-title',
11
    }}
12
  >
13
    {blog.fields.title}
14
  </h1>
15
</ViewTransition>

1
name={`blog-image-${slug}`}

1
::view-transition-group(.blog-image) {
2
  animation-duration: 700ms;
3
}
4

5
::view-transition-image-pair(.blog-image) {
6
  overflow: hidden;
7
  border-radius: 24px;
8
}
9

10
::view-transition-new(.blog-image) {
11
  animation: scale-in 700ms ease;
12
}
13

14
@keyframes scale-in {
15
  from {
16
    transform: scale(0.95);
17
    opacity: 0;
18
  }
19

20
  to {
21
    transform: scale(1);
22
    opacity: 1;
23
  }
24
}

1
::view-transition-image-pair()

1
loading="eager"

1
fetchPriority="high"

1
layout.tsx