提交 5fa49017 编写于 作者: hudan's avatar hudan

新增排序组件动画效果

上级 f8d8a483
......@@ -63,6 +63,22 @@
}
}
}
.open-bar {
background-color: #EEF2F5;
.slide-in(@x-begin,@x-end,@c-begin,@c-end,@name){
@keyframes @name{
from {
transform: translateX(@x-begin);
background-color: @c-begin;
}
to {
transform: translateX(@x-end);
background-color: @c-end;
}
}
}
.slide-in(1670px,0px,#fff,#EEF2F5,fadein);
.animation(@animation-name,@animation-duration,@animation-timing-function,@animation-delay,@play-state){
animation: @arguments;
};
.open-bar {
.animation(fadein,0.7s,linear,0s,forwards);
};
\ No newline at end of file
<template>
<div :class="['app-sort-bar', isSort ? 'open-bar' : '']">
<div :class="['app-sort-bar', isSort ? 'open-bar' : '',]">
<row v-if="sortModel && sortModel.length>0" class="page-sort-bar" :gutter="10" type="flex" justify="start" style="margin:0px;">
<template v-for="(item, index) in sortModel">
<i-col v-show="isSort" :key="index" :class="getSortClass(item)">
<div >
<div @click="sortItemClick(item)">
<span class="sort-field-text" >{{$t('entities.'+ entityName +'.fields.' + item)}}</span>
<span class="caret-wrapper">
......@@ -10,6 +11,8 @@
<Icon type="md-arrow-dropdown" />
</span>
</div>
</div>
</i-col>
</template>
<div class="issort" @click="handleSort">
......@@ -48,7 +51,6 @@ export default class AppSortBar extends Vue {
}
public sortItemClick(name: string) {
console.log(name);
this.$emit('clickSort', name);
}
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册