为了在Vue组件进入或退出DOM时执行CSS过渡和动画,动画使用Vue过渡。
Animations封装了所有将被动画化的组件,并将每个子元素包含在AnimationChild组件中。
默认设置
下面的示例演示如何为添加到幻灯片动画的内容元素设置动画,并带有进入效果。 当 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 { 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致力于新的开发,来满足不断变化的需求。Kendo UI for Vue使用旨在提高性能和丰富用户体验的Vue组件,帮助开发人员构建下一代应用程序。它是为Vue技术框架提供可用的Kendo UI组件,以便更快地构建更好的Vue应用程序。
Telerik_KendoUI产品技术交流群:726377843 欢迎一起进群讨论