UI组件库Kendo UI for Vue原生组件中文教程 - 如何开始制作动画

KendoVue动画使用TransitionGroup组件为出现、进入或退出视口的元素设置动画。

KendoVue Animation组件是Kendo UI for Vue的一部分，它通过kendo-vue-animation 包下的 NPM 分发。

Animations Package是Kendo UI for Vue的一部分，这是一个专业级的UI库，包含90多个组件，用于构建现代且功能丰富的应用程序。

Kendo UI最新官方正式版下载

基本用法

以下示例演示了 Fade、Expand、Push、Reveal 和 Slide 动画的实际应用。

main.vue

<template>
<div class="example-wrapper row">
<div class="col-xs-12 col-sm-6 example-config">
<input
@click="handleSelect"
id="slide"
class="k-radio k-radio-md"
name="type"
type="radio"
value="slide"
:checked="true"
/>
<label for="slide" class="k-radio-label">
 Slide
</label>
<br />
<input
@click="handleSelect"
name="type"
id="push"
class="k-radio k-radio-md"
type="radio"
value="push"
/>
<label for="push" class="k-radio-label">
 Push
</label>
<br />
<input
@click="handleSelect"
name="type"
id="expand"
class="k-radio k-radio-md"
type="radio"
value="expand"
/>
<label for="expand" class="k-radio-label">
 Expand
</label>
<br />
<input
@click="handleSelect"
name="type"
id="fade"
class="k-radio k-radio-md"
type="radio"
value="fade"
/>
<label for="fade" class="k-radio-label">
 Fade
</label>
<br />
<input
@click="handleSelect"
name="type"
id="zoom"
class="k-radio k-radio-md"
type="radio"
value="zoom"
/>
<label for="zoom" class="k-radio-label">
 Zoom
</label>
<br />
<input
@click="handleSelect"
name="type"
id="reveal"
class="k-radio k-radio-md"
type="radio"
value="reveal"
/>
<label for="reveal" class="k-radio-label">
 Reveal
</label>
<br />
<kbutton type="submit" @click="animate">Animate</kbutton>
</div>
<div class="col-xs-12 col-sm-6 example-col">
<Expand :appear="show" v-if="animationType === 'expand'">
<div class="content">
Content
</div >
</Expand>
<Fade :appear="show" v-else-if="animationType === 'fade'">
<div class="content">
Content
</div >
</Fade>
<Push :appear="show" v-else-if="animationType === 'push'">
<div class="content">
Content
</div >
</Push>
<Reveal :appear="show" v-else-if="animationType === 'reveal'">
<div class="content">
Content
</div >
</Reveal>
<Zoom :appear="show" v-else-if="animationType === 'zoom'">
<div class="content">
Content
</div >
</Zoom>
<Slide :appear="show" v-else-if="animationType === 'slide'">
<div class="content">
Content
</div >
</Slide>
</div>
</div>
</template>
<script>
import './styles.css';
import { Expand, Fade, Push, Reveal, Slide, Zoom } from '@progress/kendo-vue-animation';
import { Button } from '@progress/kendo-vue-buttons';
 
export default {
components: {
'Expand': Expand,
'Fade': Fade,
'Push': Push,
'Reveal': Reveal,
'Zoom': Zoom,
'Slide': Slide,
'kbutton': Button
},
data: function () {
return {
animationType: 'slide',
show: false
};
},
methods:{
animate(){
this.show = !this.show;
},
handleSelect(event) {
this.animationType = event.target.value;
}
}
}
</script>

main.js

import { createApp } from 'vue'
import App from './main.vue'
 
createApp(App).mount('#app')

style.css

.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);
}
.k-radio-label {
line-height: 1.2;
margin-bottom: .5rem;
}

安装

要初始化动画，可以：

• 使用 CDN 服务，或
• 使用 Webpack

使用 CDN

要将 Kendo UI for Vue Native Animation 组件与 CDN 一起使用，请按照以下步骤操作：

1. 引用动画包。

<script src="https://unpkg.com/@progress/kendo-vue-animation@latest/dist/cdn/js/kendo-vue-animation.js"></script>

2. 引用其中一个Kendo UI主题来为您的组件设置样式。

// Load the Kendo Default Theme
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css">
 
// Load the Kendo Bootstrap Theme
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
 
// To load the Kendo Material Theme
<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-material@latest/dist/all.css">

使用 Webpack 初始化

1. 下载并安装软件包，使用 Node.js v5.0.0 或更高版本。

npm install --save @progress/kendo-vue-animation @progress/kendo-licensing

2. 安装后，导入包模块。

// ES2015 module syntax
import { Fade } from '@progress/kendo-vue-animation';
 
// CommonJS format
const { Fade } = require('@progress/kendo-vue-animation');

3. 您需要安装其中一个 Kendo UI 主题来为您的组件设置样式。

依赖项

Animation 包要求您在应用程序中安装以下对等依赖项：

• vue 2.6.11 或 3.0.0
• @progress/kendo-licensing

Kendo UI for Vue | 下载试用

Kendo UI致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。

---

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论

了解最新Kendo UI最新资讯，请关注Telerik中文网！