KendoVue动画使用TransitionGroup组件为出现、进入或退出视口的元素设置动画。
KendoVue Animation组件是Kendo UI for Vue的一部分，它通过kendo-vue-animation 包下的 NPM 分发。
Animations Package是Kendo UI for Vue的一部分，这是一个专业级的UI库，包含90多个组件，用于构建现代且功能丰富的应用程序。
基本用法
以下示例演示了 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 {
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致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。
Telerik_KendoUI产品技术交流群：726377843 欢迎一起进群讨论