个人笔记

或许为了自身写，或许为了知己写！

ElementUI中Drawer组件特效在Safari浏览器出现动画错误

发表于 | 更新于 |
字数统计 363 字

ElementUI 中的抽屉组件在 safari 浏览器下，动画向上跳出然后再定位在底部呈现抽屉效果。

官网上出现的动画异常在 2.13.0 版本之后，在这版本之前没有出现动画错误。

对比版本

  • 2.12.0 版本：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

data() {
    return {
      closed: false,
      prevActiveElement: null
    };
 	},
 	watch: {
    visible(val) {
      	if (val) {
	        this.closed = false;
	        this.$emit('open');
	        if (this.appendToBody) {
	         	document.body.appendChild(this.$el);
	        }
	        this.prevActiveElement = document.activeElement;
	        this.$nextTick(() => {
	         	Utils.focusFirstDescendant(this.$refs.drawer);
	        });
      	} else {
	        if (!this.closed) this.$emit('close');
	        this.$nextTick(() => {
	          	if (this.prevActiveElement) {
	            	this.prevActiveElement.focus();
	          	}
	        });
      	}
    }
 	}
  • 2.13.1 版本
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
data() {
  return {
    	closed: false,
    	prevActiveElement: null
  };
 },
watch: {
  visible(val) {
    	if (val) {
       this.closed = false;
       this.$emit('open');
       if (this.appendToBody) {
       	document.body.appendChild(this.$el);
       }
       this.prevActiveElement = document.activeElement;
       /****/
       this.$nextTick(function() {
       	Utils.focusFirstDescendant(this.$refs.drawer);
       })
       /****/
    	} else {
      	if (!this.closed) this.$emit('close');
      	/****/
      	this.$nextTick(function() {
      		if(this.prevActiveElement) {
      			this.prevActiveElement.focus();
      		}
      	})
      	/****/
    	}
  }
},

这段代码是为了触发focus，触发focus 造成动画偏移，在safari浏览器中 如果抽屉组件中唯一可focus的元素是element的按钮组件，则改抽屉出现的动画定位会偏移并且动效不对，如果把该组件的头部隐藏，内容中没有按钮，这样就没有这样的问题！

这就是出现动画错误的原因。

解决方案

  • 删除源码中上面 $nextTick 两段代码块。

  • 自己封装抽屉特效。

———— / END / ————
0%