UI组件库Kendo UI for Vue原生组件中文教程：如何配置动画

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

为了在

默认设置

下面的示例演示如何为添加到幻灯片动画的内容元素设置动画，并带有进入效果。 当 CONTENT 被移除时，元素会获得特殊的动画效果。

main.vue

<template><div class="example"><div><dl><dt>Slide:</dt><dd><kbutton @click="animate">Animate</kbutton></dd></dl><Slide :appear="show"><div class="content">CONTENT</div></Slide></div></div></template><script>import './styles.css';import { Slide } from '@progress/kendo-vue-animation';import { Button } from '@progress/kendo-vue-buttons';export default {components: {'Slide': Slide,'kbutton': Button},data: function () {return {show: true};},methods:{animate(){this.show = !this.show;}}}</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);}

动画元素和组件

输入组件

对于进入动画的子组件，Animations 设置了一个 {transitionName}-enter CSS 类。 然后，为了开始动画，他们向子组元素加了一个 {transitionName}-enter-active CSS 类。

CSS 类名的命名约定类似于 Transition 组件中的类，例如Slide 在 enter 时添加了一个 k-slide-down-enter CSS 类，并在下一个 tick 中添加了一个 k-slide-down-enter-active 来激活过渡。

现有组件

对于退出动画的子组件，Animations 设置了一个 {transitionName}-exit CSS 类。 然后，为了开始动画，他们向子元素添加了一个 {transitionName}-exit-active CSS 类。

CSS 类名的命名约定类似于 Transition 组件中的类，例如Slide 在退出时添加了一个 k-slide-down-exit CSS 类，并在下一个tick中添加了一个 k-slide-down-exit-active 来激活过渡。

Kendo UI for Vue | 下载试用

Kendo UI致力于新的开发，来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件，帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件，以便更快地构建更好的Vue应用程序。

Telerik_KendoUI产品技术交流群：726377843    欢迎一起进群讨论

了解最新Kendo UI最新资讯，请关注Telerik中文网！

来源：慧都