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应用程序。