Refactor animation

pull/12/head
cagataycivici 2019-05-27 15:33:58 +03:00
parent cbe15d9965
commit 57c8df0306
1 changed files with 8 additions and 7 deletions

View File

@ -2,7 +2,7 @@
<span :class="containerClass"> <span :class="containerClass">
<CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" /> <CalendarInputText ref="input" v-if="!inline" type="text" v-bind="$attrs" v-on="listeners" :value="inputFieldValue" :readonly="!manualInput" />
<CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" @click="onButtonClick" /> <CalendarButton v-if="showIcon" :icon="icon" tabindex="-1" class="p-datepicker-trigger p-calendar-button" :disabled="$attrs.disabled" @click="onButtonClick" />
<transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="bindOutsideClickListener" @leave="onOverlayLeave"> <transition name="p-input-overlay" @enter="onOverlayEnter" @after-enter="onOverlayEnterComplete" @leave="onOverlayLeave">
<div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible"> <div ref="overlay" :class="panelStyleClass" v-if="inline ? true : overlayVisible">
<template v-if="!timeOnly"> <template v-if="!timeOnly">
<div class="p-datepicker-group" v-for="(month,i) of months" :key="month.month + month.year"> <div class="p-datepicker-group" v-for="(month,i) of months" :key="month.month + month.year">
@ -504,6 +504,9 @@ export default {
this.alignOverlay(); this.alignOverlay();
this.$emit('show'); this.$emit('show');
}, },
onOverlayEnterComplete() {
this.bindOutsideClickListener();
},
onOverlayLeave() { onOverlayLeave() {
this.unbindOutsideClickListener(); this.unbindOutsideClickListener();
this.$emit('hide'); this.$emit('hide');
@ -1153,12 +1156,10 @@ export default {
this.mask.style.zIndex = String(parseInt(this.$refs.overlay.style.zIndex, 10) - 1); this.mask.style.zIndex = String(parseInt(this.$refs.overlay.style.zIndex, 10) - 1);
DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker'); DomHandler.addMultipleClasses(this.mask, 'p-component-overlay p-datepicker-mask p-datepicker-mask-scrollblocker');
setTimeout(() => {
this.maskClickListener = () => { this.maskClickListener = () => {
this.disableModality(); this.disableModality();
}; };
this.mask.addEventListener('click', this.maskClickListener); this.mask.addEventListener('click', this.maskClickListener);
}, 150);
document.body.appendChild(this.mask); document.body.appendChild(this.mask);
DomHandler.addClass(document.body, 'p-overflow-hidden'); DomHandler.addClass(document.body, 'p-overflow-hidden');