KendoVue動(dòng)畫使用組件為出現(xiàn)、進(jìn)入或退出視口的元素設(shè)置動(dòng)畫。

KendoVue Animation組件是Kendo UI for Vue的一部分，它通過kendo-vue-animation 包下的 NPM 分發(fā)。

Animations Package是Kendo UI for Vue的一部分，這是一個(gè)專業(yè)級(jí)的UI庫，包含90多個(gè)組件，用于構(gòu)建現(xiàn)代且功能豐富的應(yīng)用程序。

Kendo UI最新官方正式版下載

基本用法

以下示例演示了 Fade、Expand、Push、Reveal 和 Slide 動(dòng)畫的實(shí)際應(yīng)用。

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;
}

安裝

要初始化動(dòng)畫，可以：

• 使用 CDN 服務(wù)，或
• 使用 Webpack

使用 CDN

要將 Kendo UI for Vue Native Animation 組件與 CDN 一起使用，請(qǐng)按照以下步驟操作：

1. 引用動(dòng)畫包。

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

2. 引用其中一個(gè)Kendo UI主題來為您的組件設(shè)置樣式。

// Load the Kendo Default Theme
<link rel="stylesheet" >

// Load the Kendo Bootstrap Theme
<link rel="stylesheet" >
<link >

// To load the Kendo Material Theme
<link rel="stylesheet" >

使用 Webpack 初始化

1. 下載并安裝軟件包，使用 Node.js v5.0.0 或更高版本。

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

2. 安裝后，導(dǎo)入包模塊。

// ES2015 module syntax
import { Fade } from '@progress/kendo-vue-animation';

// CommonJS format
const { Fade } = require('@progress/kendo-vue-animation');

3. 您需要安裝其中一個(gè) Kendo UI 主題來為您的組件設(shè)置樣式。

依賴項(xiàng)

Animation 包要求您在應(yīng)用程序中安裝以下對(duì)等依賴項(xiàng)：

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

Kendo UI for Vue | 下載試用

Kendo UI致力于新的開發(fā)，來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗(yàn)的Vue組件，幫助開發(fā)人員構(gòu)建下一代應(yīng)用程序。它是為Vue技術(shù)框架提供可用的Kendo UI組件，以便更快地構(gòu)建更好的Vue應(yīng)用程序。

Telerik_KendoUI產(chǎn)品技術(shù)交流群：726377843    歡迎一起進(jìn)群討論