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

本文主要为大家介绍如何开始使用Kendo UI for Vue组件开始制作动画，欢迎下载最新版控件体验！

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

KendoVue Animation组件是

基本用法

以下示例演示了 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 syntaximport { Fade } from '@progress/kendo-vue-animation';// CommonJS formatconst { 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中文网！

来源：慧都