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

最新推荐文章于 2023-12-06 09:45:13 发布

界面开发小八哥

最新推荐文章于 2023-12-06 09:45:13 发布

阅读量393

点赞数

文章标签： ui 动画 vue.js kendo ui vue

本文链接：https://blog.csdn.net/AABBbaby/article/details/125612935

版权

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 包要求您在应用程序中安装以下对等依赖项：