UI组件库Kendo UI for Vue原生组件入门指南 - 如何配置动画

为了在Vue组件进入或退出DOM时执行CSS过渡和动画，动画使用Vue过渡。

Animations封装了所有将被动画化的组件，并将每个子元素包含在AnimationChild组件中。

Kendo UI最新官方正式版下载

默认设置

下面的示例演示如何为添加到幻灯片动画的内容元素设置动画，并带有进入效果。 当 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中文网！