fix transitionend event compatibility

pull/1947/head^2
baiyaaaaa 2016-12-26 14:20:16 +08:00 committed by 杨奕
parent 46295dfd92
commit 22360be889
2 changed files with 19 additions and 10 deletions

View File

@ -136,12 +136,12 @@
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------------- |---------- |-------------------------------- |-------- |
| accordion | 是否手风琴模式 | boolean | — | false |
| value | 当前激活的面板 | string/array | — | — |
| value | 当前激活的面板(如果是手风琴模式,绑定值类型需要为`string`,否则为`array`) | string/array | — | — |
### Collapse Events
| 事件名称 | 说明 | 回调参数 |
|---------|---------|---------|
| change | 当前激活面板改变时触发 | (activeNames: array) |
| change | 当前激活面板改变时触发(如果是手风琴模式,参数 `activeNames` 类型为`string`,否则为`array`) | (activeNames: array\|array) |
### Collapse Item Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |

View File

@ -15,12 +15,21 @@
import { once } from 'wind-dom';
import Emitter from 'element-ui/src/mixins/emitter';
function uid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
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];
}
}
return `${S4()}${S4()}-${S4()}-${S4()}-${S4()}-${S4()}${S4()}${S4()}`;
}
};
export default {
name: 'ElCollapseItem',
@ -41,7 +50,7 @@
name: {
type: [String, Number],
default() {
return uid();
return this._uid;
}
}
},
@ -66,7 +75,7 @@
contentStyle.display = 'block';
this.$nextTick(_ => {
contentStyle.height = this.contentHeight + 'px';
once(contentElm, 'transitionend', () => {
once(contentElm, getTransitionendEvent(contentElm), () => {
contentStyle.height = 'auto';
});
});
@ -81,7 +90,7 @@
this.$nextTick(_ => {
contentStyle.height = '0';
once(contentElm, 'transitionend', () => {
once(contentElm, getTransitionendEvent(contentElm), () => {
this.$set(this.contentStyle, 'display', 'none');
});
});