github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

use collapse transition in collapse

pull/2390/head
baiyaaaaa 2017-01-12 15:13:10 +08:00 committed by 杨奕
parent 1a8ee76c78
commit d96b585363
1 changed files with 11 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
packages/collapse/src/collapse-item.vue
View File

@ -4,32 +4,18 @@
<i class="el-collapse-item__header__arrow el-icon-arrow-right"></i> <i class="el-collapse-item__header__arrow el-icon-arrow-right"></i>
<slot name="title">{{title}}</slot> <slot name="title">{{title}}</slot>
</div> </div>
<div class="el-collapse-item__wrap" ref="contentWrap"> <collapse-transition>
<div class="el-collapse-item__content" ref="content"> <div class="el-collapse-item__wrap" v-show="isActive">
<slot></slot> <div class="el-collapse-item__content">
<slot></slot>
</div>
</div> </div>
</div> </collapse-transition>
</div> </div>
</template> </template>
<script> <script>
import { once } from 'element-ui/src/utils/dom';
import Emitter from 'element-ui/src/mixins/emitter'; import Emitter from 'element-ui/src/mixins/emitter';
import CollapseTransition from 'element-ui/src/transitions/collapse-transition';
function getTransitionendEvent(el) {
let t;
let transitions = {
'transition': 'transitionend',
'OTransition': 'oTransitionEnd',
'MozTransition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
};
for (t in transitions) {
if (el.style[t] !== undefined) {
return transitions[t];
}
}
};
export default { export default {
name: 'ElCollapseItem', name: 'ElCollapseItem',
@ -38,6 +24,10 @@
mixins: [Emitter], mixins: [Emitter],
components: {
CollapseTransition
},
data() { data() {
return { return {
contentWrapStyle: { contentWrapStyle: {
@ -66,57 +56,16 @@
watch: { watch: {
'isActive'(value) { 'isActive'(value) {
value ? this.open() : this.close();
} }
}, },
methods: { methods: {
open() {
const contentWrapElm = this.$refs.contentWrap;
const contentHeight = this.contentHeight;
contentWrapElm.style.display = 'block';
contentWrapElm.style.height = '0';
setTimeout(_ => {
contentWrapElm.style.height = contentHeight + 'px';
once(contentWrapElm, getTransitionendEvent(contentWrapElm), () => {
if (!this.isActive) return;
contentWrapElm.style.height = 'auto';
});
}, 10);
},
close() {
const contentWrapElm = this.$refs.contentWrap;
const contentElm = this.$refs.content;
const contentHeight = contentElm.offsetHeight;
this.contentHeight = contentHeight;
contentWrapElm.style.height = contentHeight + 'px';
setTimeout(_ => {
contentWrapElm.style.height = '0';
once(contentWrapElm, getTransitionendEvent(contentWrapElm), () => {
if (this.isActive) return;
contentWrapElm.style.display = 'none';
});
}, 10);
},
init() {
if (!this.isActive) {
let contentWrapElm = this.$refs.contentWrap;
this.contentHeight = this.$refs.content.offsetHeight;
contentWrapElm.style.height = '0';
contentWrapElm.style.display = 'none';
}
},
handleHeaderClick() { handleHeaderClick() {
this.dispatch('ElCollapse', 'item-click', this); this.dispatch('ElCollapse', 'item-click', this);
} }
}, },
mounted() { mounted() {
this.init();
} }
}; };
</script> </script>