翻譯|使用教程|編輯:龔雪|2022-07-12 10:31:22.857|閱讀 187 次
概述:本文主要為大家介紹如何開始使用Kendo UI for Vue組件如何配置應(yīng)用動畫,歡迎下載最新版控件體驗!
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
為了在Vue組件進入或退出DOM時執(zhí)行CSS過渡和動畫,動畫使用Vue過渡。
Animations封裝了所有將被動畫化的組件,并將每個子元素包含在AnimationChild組件中。
下面的示例演示如何為添加到幻燈片動畫的內(nèi)容元素設(shè)置動畫,并帶有進入效果。 當(dāng) 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 設(shè)置了一個 {transitionName}-enter CSS 類。 然后,為了開始動畫,他們向子組元素加了一個 {transitionName}-enter-active CSS 類。
CSS 類名的命名約定類似于 Transition 組件中的類,例如Slide 在 enter 時添加了一個 k-slide-down-enter CSS 類,并在下一個 tick 中添加了一個 k-slide-down-enter-active 來激活過渡。
現(xiàn)有組件
對于退出動畫的子組件,Animations 設(shè)置了一個 {transitionName}-exit CSS 類。 然后,為了開始動畫,他們向子元素添加了一個 {transitionName}-exit-active CSS 類。
CSS 類名的命名約定類似于 Transition 組件中的類,例如Slide 在退出時添加了一個 k-slide-down-exit CSS 類,并在下一個tick中添加了一個 k-slide-down-exit-active 來激活過渡。
Kendo UI致力于新的開發(fā),來滿足不斷變化的需求。Kendo UI for Vue使用旨在提高性能和豐富用戶體驗的Vue組件,幫助開發(fā)人員構(gòu)建下一代應(yīng)用程序。它是為Vue技術(shù)框架提供可用的Kendo UI組件,以便更快地構(gòu)建更好的Vue應(yīng)用程序。
Telerik_KendoUI產(chǎn)品技術(shù)交流群:726377843 歡迎一起進群討論
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)