Веб-анимация создает привлекательный и захватывающий пользовательский интерфейс, но создание надежной анимации в программном обеспечении было непростым делом. При масштабировании приложения возникает множество трудностей, поэтому разработчики создали несколько библиотек многократного использования, чтобы справиться с этими трудностями.
Эта статья будет посвящена одной из таких библиотек — KendoReact и ее компоненту React Animation. В KendoReact компонент TransitionGroup помогает пользователям анимировать элементы, которые появляются, входят или выходят из области просмотра.
Библиотека KendoReact включает компонент KendoReact Animation в свой надежный набор из более чем 100 настраиваемых и полностью доступных компонентов React UI. Он распространяется через npm под пакетом kendo-react-animation.
Предварительные условия
Чтобы следовать этому руководству, вам необходимо иметь:
- базовые знания о ReactJS
- Установленный Node.js
- редактор кода
Установка и настройка
Во-первых, нам нужно использовать следующую команду для создания проекта, переместиться в каталог проекта и запустить проект. Введите приведенную ниже команду в терминале:
npx create-react-app kendo-ui-animations --use-npm
cd kendo-ui-animations
npm start
Далее установите библиотеку KendoReact, необходимую для проекта, с помощью следующей команды.
npm install --save @progress/kendo-react-animation
Примечание: KendoReact — это коммерческая библиотека компонентов пользовательского интерфейса, и в связи с этим вам необходимо будет предоставить лицензионный ключ, когда вы будете использовать компоненты в своих проектах React. Вы можете получить лицензионный ключ через бесплатную пробную версию или имея коммерческую лицензию. Для получения дополнительной информации вы можете перейти на страницу лицензирования KendoReact.
Настройка компонента React Animation
ReactTransitionGroup выполняет CSS переходы и анимацию, когда React компонент входит или выходит из DOM. Все компоненты, обернутые анимацией, будут анимированы с каждым дочерним элементом, заключенным в компонент AnimationChild. Компонент AnimationChild
реализует необходимые специальные крючки жизненного цикла, а каждый дочерний компонент оборачивается в дополнительный элемент div.
Компонент TransitionGroup автоматически определяет состояние входа и выхода дочерних компонентов. Это означает, что для анимации дочернего компонента достаточно добавить или удалить его.
В следующем примере показано, как анимировать элемент content
, добавленный к анимации слайда, с эффектом входа. Когда content
удаляется, элемент приобретает уникальный эффект анимации.
Для эстетики нашего пользовательского интерфейса создадим файл style.css
в каталоге src
и вставим в него следующий код.
.content {
width: 100px;
padding: 10px;
color: #787878;
background-color: #fcf7f8;
font-size: 13px;
font-family: Helvetica, Arial, sans-serif;
letter-spacing: 1px;
text-align: center;
border: 1px solid rgba(0,0,0,.05);
}
Приведенный выше код CSS используется для стилизации содержимого, которое мы создадим в ближайшее время.
В каталоге проекта вы увидите файл App.js
в каталоге src; замените содержимое этого файла кодом, приведенным ниже.
import {useState} from "react";
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(true);
const onClick = () => {
setShow((state)=>{
!state
});
};
const children = show ? <div className="content">CONTENT</div> : null;
return (
<div>
<dl>
<dt>Animate:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Slide>{children}</Slide>
</div>
);
};
Мы импортировали Slide
из KendoReact и state
из React в приведенном выше коде. Затем мы вызвали state
в App.js
и установили его начальное значение true (что означает, что содержимое элемента будет видно при первоначальном рендеринге). Мы создали переменную children и присвоили ей значение, основанное на текущем состоянии значения show, используя тернарный оператор.
Итак, всякий раз, когда мы нажимаем на тег кнопки, вызывается функция onClick
, которая изменяет состояние show
. Но здесь мы передаем обратный вызов в setShow
, потому что следующее значение состояния зависит от предыдущего значения состояния show
.
Типы анимации
Содержимое компонента Animation анимируется с помощью различных эффектов анимации. Пакет Animation содержит следующие типы анимации:
- Затухание
- Развернуть
- Толчок
- Раскрытие
- Сдвиг
- Zoom
Чтобы использовать эти различные анимации, вернитесь в файл App.js
и замените все части кода, содержащие Slide, на ту анимацию, которую вы хотите использовать; ниже приведен пример с использованием Fade.
import {useState} from "react";
import { Fade } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(true);
const onClick = () => {
setShow((state)=>{
!state
});
};
const children = show ? <div className="content">CONTENT</div> : null;
return (
<div>
<dl>
<dt>Animate:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Fade>{children}</Fade>
</div>
);
};
Отключенные анимации
Вы также можете отключить или включить (скрыть или показать) эффект анимации. Управление состоянием отключенной анимации приводит к ее исчезновению или мгновенному отображению элемента.
Анимации Expand, Push, Reveal, Slide и Zoom по умолчанию применяют эффект скрытия или показа. Чтобы отключить эти эффекты, установите свойство exit или enter, соответственно, в false.
Теперь скорректируйте или замените код в файле App.js
, чтобы он соответствовал приведенному ниже коду.
import {useState} from "react";
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(false);
const [enter, setEnter] = useState(true);
const [exit, setExit] = useState(true);
const onClick = () => {
setShow(!show);
};
const onChange = (e) => {
if (e.target.name === "enter") {
setEnter(e.target.checked);
} else {
setExit(e.target.checked);
}
};
const children = show ? <div className="content">CONTENT</div> : null;
return (
<div>
<dl>
<dt>
<dl>
<input
type="checkbox"
id="enter"
className="k-checkbox"
name="enter"
checked={enter}
onChange={onChange}
/>
<label htmlFor="enter" className="k-checkbox-label">
Enter:
</label>
<br />
<input
type="checkbox"
id="exit"
className="k-checkbox"
name="exit"
checked={exit}
onChange={onChange}
/>
<label htmlFor="exit" className="k-checkbox-label">
Exit:
</label>
</dl>
</dt>
<dt>Animate:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Slide enter={enter} exit={exit}>
{children}
</Slide>
</div>
);
};
Реквизиты enter
и exit
передаются в компонент анимации (Slide), чтобы включить анимацию входа и выхода в приведенном выше коде; это происходит потому, что значения enter
и exit
изначально установлены в true.
Мы также добавили функцию onChange; эта функция вызывается при установке или снятии флажка в теге input, что позволило включить или выключить анимацию входа или выхода.
Сложенные анимации
Все анимации являются продолжением компонента Animation. Однако такие анимации, как Push и Zoom, расширяются с помощью опций stackChildren
, которые позволяют объединять анимации в стек.
Выход и вход в дочерние элементы
Чтобы складывать выходящие и входящие дочерние элементы в один блок-контейнер, установите свойство stackChildren
в true. Когда речь идет о замене существующего дочернего элемента новым, эффект стека подходит как нельзя лучше.
Теперь подкорректируйте или замените код в файле App.js
, чтобы он соответствовал приведенному ниже коду.
import {useState}from "react";
import { Zoom } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [index, setIndex] = useState(1);
const onClick = () => {
setIndex(index + 1);
};
return (
<div>
<dl>
<dt>Zoom:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Zoom stackChildren={true}>
<div className="content" key={index}>
{index}
</div>
</Zoom>
</div>
);
};
В приведенных выше кодах мы импортировали компоненты анимации как обычно. Но на этот раз мы передали вложенные JSX, что отличается от предыдущей анимации, где мы передали только один JSX. Чтобы это сработало, мы должны были передать реквизит stackChildren
со значением true.
Крючки жизненного цикла
Когда объявляется дочерний элемент, вы либо удаляете, либо добавляете ребенка. Все анимации вызывают определенные хуки во время входа или выхода элемента.
Добавление дочерних элементов
Каждый раз, когда вы добавляете компонент в анимацию входа, анимация вызывает следующие хуки:
onEnter — вызывается перед началом анимации.
onEntering — вызывается после начала анимации.
onEntered — вызывается по завершении анимации.
Удаление дочерних элементов
Анимации вызывают следующий хук при каждом удалении компонента из существующей анимации:
onExit — вызывается перед началом анимации.
onExiting — вызывается после начала анимации.
onExited — вызывается по завершении анимации.
Продолжительность
Все типы анимации позволяют контролировать продолжительность эффектов выхода и входа.
При настройке длительности обязательно определите свойство transitionExitDuration или transitionEnterDuration. Длительность представлена передаваемым значением анимации в миллисекундах.
Например, скорректируйте или замените код в файле App.js, чтобы он соответствовал приведенному ниже коду.
import {useState} from "react";
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(false);
const onClick = () => {
setShow(!show);
};
const children = show ? <div className="content">CONTENT</div> : null;
return (
<div>
<dl>
<dt>Animate:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Slide transitionEnterDuration={800} transitionExitDuration={1000}>
{children}
</Slide>
</div>
);
};
В приведенном выше коде мы сделали корректировку для импорта Slide
из KendoReact Animation. Также мы передали реквизиты transitionEnterDuration
и transitionExitDuration
, чтобы указать длительность анимации для входа и выхода.
Направление
За исключением анимации Fade, анимации предоставляют набор предопределенных направлений, которые позволяют нам управлять эффектами выхода и входа.
Примечание: Настраиваемое направление недоступно для анимации затухания, поскольку она представляет собой переход непрозрачности элемента.
Анимации входа и выхода могут быть определены с помощью свойства direction каждого типа анимации, перечисленного ниже:
- ExpandDirection
- PushDirection
- RevealDirection
- SlideDirection
- ZoomDirection
Развернуть
Анимация «Развернуть» поддерживает следующие предопределенные направления:
- Вертикальное (по умолчанию): Содержимое разворачивается от центра к верху и низу, и наоборот.
- Горизонтальное: содержимое разворачивается от центра влево и вправо, и наоборот.
Теперь измените или замените код в файле App.js
на код ниже.
import { useState } from "react"
import { Expand } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(false);
const [direction, setDirection] = useState("vertical");
const onClick = () => {
setShow(!show);
};
const onChange = (e) => {
setDirection(e.target.value);
};
const children = show ? <div className="content">Content</div> : null;
return (
<div className="row">
<div className="col-md-6">
<dl>
<dt>Expand: {direction}</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Expand direction={direction}>{children}</Expand>
</div>
<div className="col-md-6">
<dl>
<dt>Direction:</dt>
<dd>
<div className="example-config">
<input
id="ver"
className="k-radio"
type="radio"
name="direction"
value="vertical"
defaultChecked={direction === "vertical"}
onClick={onChange}
/>
<label htmlFor="ver" className="k-radio-label">
Vertical
</label>
<br />
<input
id="hor"
className="k-radio"
type="radio"
name="direction"
value="horizontal"
defaultChecked={direction === "horizontal"}
onClick={onChange}
/>
<label htmlFor="hor" className="k-radio-label">
Horizontal
</label>
</div>
</dd>
</dl>
</div>
</div>
);
};
В приведенном выше коде мы вызвали функцию setDirection
; значение setDirection
определяет значение свойства Direction
, переданного в компонент Expand
, импортированный из анимации KendoReact. На рисунке GIF ниже показан результат.
Push
Анимация Push Animation поддерживает следующие предопределенные направления:
Вправо (по умолчанию) — содержимое толкается слева направо.
Вверх — содержимое перемещается снизу вверх.
Вниз — содержимое перемещается сверху вниз.
Влево — содержимое перемещается справа налево.
Теперь измените или замените код в файле App.js, чтобы он соответствовал приведенному ниже коду.
import { useState } from "react"
import { Push } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [direction, setDirection] = useState("right");
const [index, setIndex] = useState(1);
const onClick = () => {
setIndex(index + 1);
};
const onChange = (e) => {
setDirection(e.target.value);
};
return (
<div className="row">
<div className="col-md-6">
<dl>
<dt>Push: {direction}</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Push direction={direction} stackChildren={true}>
<div className="content" key={index}>
{index}
</div>
</Push>
</div>
<div className="col-md-6">
<dl>
<dt>Direction:</dt>
<dd>
<div className="example-config">
<input
id="up"
className="k-radio"
type="radio"
name="direction"
value="up"
defaultChecked={direction === "up"}
onClick={onChange}
/>
<label htmlFor="up" className="k-radio-label">
Up
</label>
<br />
<input
id="down"
className="k-radio"
type="radio"
name="direction"
value="down"
defaultChecked={direction === "down"}
onClick={onChange}
/>
<label htmlFor="down" className="k-radio-label">
Down
</label>
<br />
<input
id="left"
className="k-radio"
type="radio"
name="direction"
value="left"
defaultChecked={direction === "left"}
onClick={onChange}
/>
<label htmlFor="left" className="k-radio-label">
Left
</label>
<br />
<input
id="right"
className="k-radio"
type="radio"
name="direction"
value="right"
defaultChecked={direction === "right"}
onClick={onChange}
/>
<label htmlFor="right" className="k-radio-label">
Right
</label>
</div>
</dd>
</dl>
</div>
</div>
);
};
В приведенном выше коде мы следовали тому же синтаксису, что и в Expand
, но на этот раз процесс выполняется с помощью компонента Push
. Также мы включили компонент stackChildren
. На рисунке GIF ниже показан результат.
Reveal
Анимация Reveal поддерживает следующие предопределенные направления:
Вертикальное (по умолчанию) — раскрывается содержимое высоты.
Горизонтальное — отображается содержимое ширины.
Теперь отрегулируйте или замените код в файле App.js, чтобы он соответствовал приведенному ниже коду.
import { useState } from "react"
import { Reveal } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [direction, setDirection] = useState("vertical");
const [index, setIndex] = useState(1);
const onClick = () => {
setIndex(index + 1);
};
const onChange = (e) => {
setDirection(e.target.value);
};
return (
<div className="row">
<div className="col-md-6">
<dl>
<dt>Reveal: {direction}</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Reveal direction={direction}>{index}</Reveal>
</div>
<div className="col-md-6">
<dl>
<dt>Direction:</dt>
<dd>
<div className="example-config">
<input
id="ver"
className="k-radio"
type="radio"
name="direction"
value="vertical"
defaultChecked={direction === "vertical"}
onClick={onChange}
/>
<label htmlFor="ver" className="k-radio-label">
Vertical
</label>
<br />
<input
id="hor"
className="k-radio"
type="radio"
name="direction"
value="horizontal"
defaultChecked={direction === "horizontal"}
onClick={onChange}
/>
<label htmlFor="hor" className="k-radio-label">
Horizontal
</label>
</div>
</dd>
</dl>
</div>
</div>
);
};
И снова в приведенном выше коде мы следовали тому же синтаксису, что и в Expand, но на этот раз процесс происходит с помощью анимации Reveal.
Слайд
Анимация Slide Animation поддерживает следующие предопределенные направления:
Вниз (по умолчанию) — содержимое скользит сверху вниз, и наоборот.
Вверх — содержимое скользит снизу вверх, и наоборот.
Влево — содержимое скользит справа налево, и наоборот.
Right-The content is slid from left to right, and vice versa.
Теперь измените или замените код в файле App.js на приведенный ниже код.
import { useState } from "react"
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(false);
const [direction, setDirection] = React.useState("down");
const onClick = () => {
setShow(!show);
};
const onChange = (e) => {
setDirection(e.target.value);
};
const children = show ? <div className="content">CONTENT</div> : null;
return (
<div className="row">
<div className="col-md-6">
<dl>
<dt>Slide: {direction}</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Slide direction={direction}>{children}</Slide>
</div>
<div className="col-md-6">
<dl>
<dt>Direction:</dt>
<dd>
<div className="example-config">
<input
id="up"
className="k-radio"
type="radio"
name="direction"
value="up"
defaultChecked={direction === "up"}
onClick={onChange}
/>
<label htmlFor="up" className="k-radio-label">
Up
</label>
<br />
<input
id="down"
className="k-radio"
type="radio"
name="direction"
value="down"
defaultChecked={direction === "down"}
onClick={onChange}
/>
<label htmlFor="down" className="k-radio-label">
Down
</label>
<br />
<input
id="left"
className="k-radio"
type="radio"
name="direction"
value="left"
defaultChecked={direction === "left"}
onClick={onChange}
/>
<label htmlFor="left" className="k-radio-label">
Left
</label>
<br />
<input
id="right"
className="k-radio"
type="radio"
name="direction"
value="right"
defaultChecked={direction === "right"}
onClick={onChange}
/>
<label htmlFor="right" className="k-radio-label">
Right
</label>
</div>
</dd>
</dl>
</div>
</div>
);
};
Здесь мы использовали тот же синтаксис, что и в Expand, но на этот раз процесс выполняется с помощью анимации слайдов.
Zoom
Анимация Zoom поддерживает следующие предопределенные направления:
Out (по умолчанию)-Содержание увеличивается снаружи внутрь.
В — содержимое увеличивается изнутри наружу.
Теперь измените или замените код в файле App.js на приведенный ниже код.
import { useState } from "react"
import { Zoom } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [direction, setDirection] = useState("out");
const [index, setIndex] = useState(1);
const onClick = () => {
setIndex(index + 1);
};
const onChange = (e) => {
setDirection(e.target.value);
};
return (
<div className="row">
<div className="col-md-6">
<dl>
<dt>Zoom: {direction}</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Zoom direction={direction} stackChildren={true}>
<div className="content" key={index}>
{index}
</div>
</Zoom>
</div>
<div className="col-md-6">
<dl>
<dt>Direction:</dt>
<dd>
<div className="example-config">
<input
id="in"
className="k-radio"
type="radio"
name="direction"
value="in"
defaultChecked={direction === "in"}
onClick={onChange}
/>
<label htmlFor="in" className="k-radio-label">
In
</label>
<br />
<input
id="out"
className="k-radio"
type="radio"
name="direction"
value="out"
defaultChecked={direction === "out"}
onClick={onChange}
/>
<label htmlFor="out" className="k-radio-label">
Out
</label>
</div>
</dd>
</dl>
</div>
</div>
);
};
Здесь мы следовали тому же синтаксису, что и в Expand
, но процесс выполняется с помощью анимации масштабирования, и мы добавили stackChildren.
Выход из дочерних компонентов
Хотя дочерний компонент выходит, он все еще отображается, поскольку является частью React Virtual DOM, но больше не доступен в DOM.
Выходящий дочерний элемент может применять реактивные обновления, поскольку он передает функцию childFactory
. Функция управляет выходящими и входящими дочерними компонентами на основе предоставленных реквизитов.
Теперь измените или замените код в файле App.js
на приведенный ниже код.
import { useState } from "react"
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(false);
const onClick = () => {
setShow(!show);
};
const children = show ? <div className="content">CONTENT</div> : null;
const childFactory = (child) => {
if (!child.props.in) {
return React.cloneElement(child, {
...child.props,
children: <div className="content">JUST CHANGED!</div>,
});
}
return child;
};
return (
<div className="example">
<div>
<dl>
<dt>Slide:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Slide childFactory={childFactory} transitionExitDuration={1500}>
{children}
</Slide>
</div>
</div>
);
};
В приведенном выше коде функции childFactory
, переданные в качестве props компоненту Slide
, используются KendoReact для мутации существующего элемента в новый дочерний элемент <div className="content">JUST CHANGED!</div>
, созданный с помощью React.cloneElement
.
В приведенном ниже GIF показан результат.
Настройка анимации
Настройка поведения анимации осуществляется путем конфигурирования компонента Animation.
Вы можете использовать свойство transitionName для обновления эффекта Анимации. Свойство определяет имя класса, которое добавляется к элементам exit или enter.
Ввод анимации
Добавьте следующий код в файл styles.css
.
.custom-animation-enter {
transform: scale(0);
transition: transform 500ms ease-in-out;
}
.custom-animation-enter-active {
transform: scale(1);
}
В приведенном выше коде CSS-классы используются при настройке анимации входа. Далее настройте или замените код в вашем файле App.js
, чтобы он соответствовал приведенному ниже коду.
import { useState } from "react"
import { Animation } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(true);
const onClick = () => {
setShow(!show);
};
const children = show ? <div className="content">CONTENT</div> : null;
return (
<div>
<dl>
<dt>Animate:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Animation
transitionName="custom-animation"
transitionEnterDuration={300}
exit={false}
>
{children}
</Animation>
</div>
);
};
Здесь мы передали transitionName в качестве props со значением, которое является именем (custom-animation) в нашем файле style.css, и установили exit prop в false. Результат показан в GIF ниже.
Выход из анимации
И снова классы CSS используются для настройки анимации выхода с помощью следующего синтаксиса:
Добавьте следующий код в файл style.css.
.custom-animation-exit {
transform: scale()1;
transition: transform 500ms ease-in-out;
}
.custom-animation-exit-active {
transform: scale(0);
}
Далее измените или замените код в вашем файле App.js, чтобы он соответствовал приведенному ниже коду.
import { useState } from "react"
import { Animation } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(true);
const onClick = () => {
setShow(!show);
};
const children = show ? <div className="content">CONTENT</div> : null;
return (
<div>
<dl>
<dt>Slide:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Animation
transitionName="custom-animation"
transitionExitDuration={300}
enter={false}
>
{children}
</Animation>
</div>
);
};
Здесь мы передали transitionName в качестве props со значением, которое является именем (custom-animation) в нашем файле style.css, а также установили реквизит enter в false.
Внешний вид компонента React Animation
Анимации позволяют задавать пользовательские CSS-классы как всем элементам обертки анимации, так и всем их дочерним элементам или использовать их стили по умолчанию.
По умолчанию дочерний компонент отображает CSS-класс k-child-animation-container, а родительский компонент — CSS-класс k-animation-container. Вы можете использовать эти CSS-классы для стилизации компонентов без указания отдельных CSS-классов.
Добавьте следующий код в файл style.css.
.k-animation-container {
background-color: lightgray;
}
.k-animation-container > .k-child-animation-container {
color: lightgray;
background-color: #ff6757;
}
.example {
display: flex;
}
Теперь измените или замените файл App.js на приведенный ниже код.
import { useState } from "react"
import { Slide } from "@progress/kendo-react-animation";
import "./styles.css";
const App = () => {
const [show, setShow] = useState(false);
const onClick = () => {
setShow(!show);
};
const children = show ? <div className="content">CONTENT</div> : null;
return (
<div className="example">
<div>
<dl>
<dt>Slide:</dt>
<dd>
<button className="k-button" onClick={onClick}>
Animate
</button>
</dd>
</dl>
<Slide>{children}</Slide>
</div>
</div>
);
};
В приведенном выше коде мы установили className в k-button
, что позволило нам получить доступ к предопределенным стилям KendoReact для изменения внешнего вида нашего приложения. На рисунке GIF ниже показан результат.
Заключение
KendoReact предоставил простую в использовании, масштабируемую библиотеку анимации, которая помогла разработчикам быстро добавить анимацию в свои проекты. Надеюсь, вы нашли этот пост полезным.