Всем привет. Я Артем Курочкин, frontend разработчик компании DD Planet.
Сегодня я расскажу об одном из ключевых нововведений в React, представленных на React Conf 2025. Прошу любить и жаловать ViewTransition - нативная поддержка view transition api в экосистеме реакта.
Что это значит для React-разработчиков и как нам всем это поможет, мы и разберем в этой статье.
Что за зверь такой View Transition API
The View Transition API provides a mechanism for easily creating animated transitions between different website views. This includes animating between DOM states in a single-page app (SPA), and animating the navigation between documents in a multi-page app (MPA).
Если не углубляться в подробности, и сказать простым языком, данное API позволяет нам делать красивые анимации просто подключив это апи. Больше не нужно проводить часы вытирая слёзы, покадрово выверяя анимацию отрисованную дизайнером! Правда ведь? Ну, к этому мы вернемся в практической части.
Что касается всего это чуда и можно ли это тащить в прод.
И да, и нет. Все зависит от ваших требований. Хром вот поддерживает с 23 года, в то время как Firefox только в прошлом месяце включили флаг поддержки по умолчанию. Но тем не менее, это baseline 2025, поэтому еще годик-два и все будет, а изучить стоит уже сейчас.
И да, дела с MPA похуже, но мы все же говорим в контексте React разработки.
Ну и в целом, забегая вперед, стейбл релиз в React произойдет лишь в 19.3, а пока мы посмотрим на практике, как это все работает в canary ветке.
Как с этим работать в React
Рассмотрим самый базовый пример как все это завести, чтобы было красиво.
В React добавили компонент ViewTransition который является оберткой для ванильного ViewTransition интерфейса. Главное правило, без которого ничего не будет, — в нем обязательно должен лежать DOM-элемент.
<ViewTransition>
<div className="item">...</div>
</ViewTransition>
Ну все, погнали в прод? Ну, нет, чтобы анимация случилась, необходимо обернуть функцию, обновляющую DOM, в метод startTransition.
const handleUpdateDOM = () =>
startTransition(() =>
updateDOMSomethig()
)
И вот теперь все полетит. Но есть исключение: когда мы добавляем ноду ViewTransition, воспроизводится enter-анимация, а при удалении - exit.
function Child() {
return (
<ViewTransition>
<div>Hi</div>
</ViewTransition>
);
}
function Parent() {
const [show, setShow] = useState();
if (show) {
return <Child />;
}
return null;
}
Но при мапе ViewTransition, все же нужно вызывать startTransition.
А теперь давайте рассмотрим реальный пример, для этого я написал простую тудушку.
Вот код который реализует это.
//App.jsx
...
import { startTransition, useState } from "react"
import { Todo } from "./components/Todo"
function App() {
const [todos, setTodos] = useState([
{...},
])
const [isList, setIsList] = useState(false)
const addTodo = () =>
startTransition(() => {
...addTodoLogic
}
)
const updateTodos = (updatedTodo) => {
...updateTodoLogic
}
const deleteTodo = (id) =>
startTransition(() => {
...deleteTodoLogic
})
const handleView = () =>
startTransition(() => {
...handleViewLogic
})
return (
<div className={"wrapper"}>
<div className={"buttons"}>
<button onClick={addTodo}>Add</button>
<button onClick={handleView}>
{isList ? "Toggle Grid View" : "Toggle List View"}
</button>
</div>
<div className={clsx("container", { ["list"]: isList })}>
{todos.map((item) => (
<Todo
key={item.id}
item={item}
update={updateTodos}
onDelete={deleteTodo}
/>
))}
</div>
</div>
)}
export default App
//Todo.jsx
import { startTransition, ViewTransition } from "react"
import styles from "./todo.module.css"
export const Todo = ({ item, update, onDelete }) => {
const handleTodo = (value) =>
startTransition(() => {
...todoNameUpdateLogic
})
const handleComment = (value) => {
...todoCommentUpdateLogic
}
const handleComplete = (value) =>
startTransition(() => {
...todoCompleteLogic
})
const handleDelete = () => onDelete(item.id)
return (
<ViewTransition>
<div className={styles.wrapper}>
<div className={styles.row}>
<input
value={item.todo}
onChange={(event) => handleTodo(event.currentTarget.value)}
/>
<input
type='checkbox'
checked={item.complete}
onChange={(event) =>
handleComplete(event.currentTarget.checked)
}
/>
</div>
<textarea
value={item.comment}
onChange={(event) => handleComment(event.currentTarget.value)}
/>
<button onClick={handleDelete}>Delete</button>
</div>
</ViewTransition>
)}
В целом ничего сложного: один компонент обертка, и вызов метода на запуск transition, а на выходе достойный результат.
Главное не заигрывайтесь с анимациями и будьте внимательны, не вся верстка будет идеально работать.
Например, я ради эксперимента решил посмотреть, что будет с инпутом. Ответ - ничего хорошего. Даже если поставить время анимации 1мс, инпут будет терять интерактивность сильно дольше.
А что касается не идеальной работы, вот такие бывают артефакты :) (хотя, может, кому-то понравится)
Но это все цветочки, так или иначе это все можно было реализовать, написав кучку кода. А теперь перейдем к ягодкам.
Киллер фича
Барабанная дробь
Теперь можно анимировать переходы между страницами (да, стейт роутера тоже прекрасно анимируется). На этом у меня все, можно уходить (шутка).
А если серьезно, то задача такого рода (а никогда не знаешь, чего ждать от дизайнеров), ну, если раньше была не нереализуема, то точно на грани добра и зла. То теперь, пожалуйста, задача решается в одну строчку кода.
Весь код, чтобы достичь такого результата:
createRoot(document.getElementById("root")).render(
<StrictMode>
<BrowserRouter>
<ViewTransition>
<Routes>
<Route path='/' element={<App />} />
<Route path='memes' element={<Memes />} />
<Route path='lorem' element={<Lorem />} />
</Routes>
</ViewTransition>
</BrowserRouter>
</StrictMode>,
)
Да, вы все правильно поняли, просто обернуть роутер в ViewTransition.
Так или иначе, кому-то будет мало простой cross-fade анимации. Неужели это все, что можно выжать из данного инструментария? Ответ: конечно нет!
Кастомизация
Вся кастомизация сводится к работе с CSS (да, все же его пописать придется, если хочется чего-то большего)
View Transition API вводит новые псевдо-элементы:
А у компонента ViewTransition есть пропсы, которые позволяют задать класс для общения с этими псевдо-элементами.
P.S. Там еще колбеки есть на enter, exit, update и share, но я не придумал им практического применения. Можете поделиться своими идеями в комментариях.
Ну так вот, вернемся к практике. Я немного поигрался с кастомизацией анимации тудушек.
Вот все телодвижения, что я совершил для этого:
return (
<ViewTransition enter='slide-in' exit='slide-out' update='update'>
...
</ViewTransition>
)
::view-transition-new(.slide-in){
animation: slide-in cubic-bezier(.83,.15,0,.98) 0.5s forwards;
}
::view-transition-old(.slide-out){
animation: slide-out cubic-bezier(.83,.15,0,.98) 0.5s forwards ;
}
::view-transition-group(.update){
animation-duration: 1s;
animation-timing-function: cubic-bezier(.83,.15,0,.98);
}
@keyframes slide-in {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes slide-out {
from {
transform: translateX(0);
opacity: 1;
}
to {
transform: translateX(100%);
opacity: 0;
}
}
И отвечая на вопрос, который мог возникнуть у многих, кто сталкивался с анимациями: да, нас услышали - больше возится с тем, чтобы удалить элемент из DOMа только по завершению анимации не нужно.
Никаких больше CSSTransition и тому подобных либ, или что еще хуже, самим прописывать setTimeout-ы.
Если технически углубится, элементы теперь уничтожаются сразу, но появляется псевдо-элемент view-transition, в котором анимация и воспроизводится. C чем связан и не приятный бонус: к сожалению, пока воспроизводится анимация, взаимодействие с интерфейсом блокируется. Так что нужно соблюдать тонкую грань между плавностью/красотой и user friendly.
И добавлю, что для enter и exit не имеет смысла прописывать какие либо псевдо-элементы кроме new и old соответственно.
И если немного "пошаманить с бубном", можно получить красивые переходы между страницами.
<ViewTransition default='slide'>
...
</ViewTransition>
::view-transition-new(.slide){
animation: slide-in-rout cubic-bezier(.83,.15,0,.98) 1.5s forwards;
}
::view-transition-old(.slide){
animation: slide-out-rout cubic-bezier(.83,.15,0,.98) 1.5s forwards ;
}
@keyframes slide-in-rout {
from {
transform: translate(-100%, -50%) rotate(-90deg) scale(2);
filter: blur(50px);
opacity: 0;
}
to {
transform: translate(0, 0) rotate(0deg) scale(1);
filter: blur(0);
opacity: 1;
}
}
@keyframes slide-out-rout {
from {
transform: translate(0,0) rotate(0deg) scale(1);
filter: blur(0);
opacity: 1;
}
to {
transform: translate(100%, 50%) rotate(90deg) scale(.2);
filter: blur(50px);
opacity: 0;
}
}
Но и это не все, что мы можем накрутить. Можно выбирать разные анимации, в зависимости от действий юзера, так как в пропсы можно передавать не только строку, но и "словари". Чтобы переключить тип анимации, нужно использовать метод addTransitionType.
А вот и реализация
<ViewTransition
default={{
"navigation-left": "slide-left",
"navigation-right": "slide-right",
}}>
...
</ViewTransition>
...
<button
onClick={() =>
startTransition(() => {
addTransitionType("navigation-left")
navigate("/")
}) }>
{"<="} Go to todos{" "}
</button>
<button
onClick={() =>
startTransition(() => {
addTransitionType("navigation-right")
navigate("/memes")
}) }>
Go to memes {"=>"}
</button>
...
::view-transition-new(.slide-left){
animation: slide-in-left cubic-bezier(.83,.15,0,.98) 1.5s forwards;
}
::view-transition-old(.slide-left){
animation: slide-out-left cubic-bezier(.83,.15,0,.98) 1.5s forwards ;
}
@keyframes slide-in-left {
from {
transform: translate(-200%, -50%) scale(2);
}
to {
transform: translate(0, 0) scale(1);
}
}
@keyframes slide-out-left {
from {
transform: translate(0,0) scale(1);
}
to {
transform: translate(200%, 50%) scale(.2);
}
}
::view-transition-new(.slide-right){
animation: slide-in-right cubic-bezier(.83,.15,0,.98) 1.5s forwards;
}
::view-transition-old(.slide-right){
animation: slide-out-right cubic-bezier(.83,.15,0,.98) 1.5s forwards ;
}
@keyframes slide-in-right {
from {
transform: translate(200%, 50%) scale(2);
}
to {
transform: translate(0, 0) scale(1);
}
}
@keyframes slide-out-right {
from {
transform: translate(0,0) scale(1);
}
to {
transform: translate(-200%, -50%) scale(.2);
}
}
Fallbacks и оптимизация
Не нашел этому место в основном рассказе, но так же можно сделать красивые переходы между фолбеком и загрузившимся контентом.
Можно использовать для этого update или enter/exit. Реализуется это так:
//update
<ViewTransition>
<Suspense fallback={<A />}>
<B />
</Suspense>
</ViewTransition>
//enter/exit
<Suspense fallback={<ViewTransition><A /></ViewTransition>}>
<ViewTransition><B /></ViewTransition>
</Suspense>
И да, если у вас есть анимированный родитель, но у ребенка нужно убрать анимацию, в целях оптимизации или просто потому что, ребенка достаточно обернуть в еще один ViewTransition и в update прописать класс "none"
<ViewTransition>
<div className={theme}>
<ViewTransition update="none">
{children}
</ViewTransition>
</div>
</ViewTransition>
Заключение
В целом, у меня очень большие ожидания от данного API, и я очень рад, что это завезут в свежем React. Оно открывает двери в мир, где анимации реализуются на чистом CSS (почти), так как проблема с DOM ушла. Ну а для простеньких, так и в CSS лезть не надо, все из коробки: обернул что нужно, накинул методы для запуска и красиво.
Особенно это выделяется среди непонятного Activity и откровенного гениального костыльного решения проблемы ESlint в виде useEffectEvent, которые нас так же ждут в React 19.3
Ну, а на этом у меня все. Всем добра и позитива. Пишите хороший код.