Yuan Blog

Appearance

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

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

对比版本 ​

  • 2.12.0 版本：
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();
		          	}
		        });
	      	}
	    }
  	}
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 版本
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();
	        		}
	        	})
	        	/****/
	      	}
	    }
  	},
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 两段代码块。

  • 自己封装抽屉特效。