modal animation

This commit is contained in:
kandrusyak
2022-12-06 14:42:42 +03:00
parent a7b9c81e06
commit 150e5acf6d

View File

@@ -1,11 +1,12 @@
<template lang="pug"> <template lang="pug">
teleport(:to="appContainer", v-if="value") teleport(:to="appContainer")
.base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay") transition
.base-content(v-click-outside="clickOutside", :style="styleContent") .base-overlay(:class="{'base-overlay-bg': !hideOverlay}", :style="styleOverlay", v-if="value")
.base-header .base-content(v-click-outside="clickOutside", :style="styleContent")
.header-title.text {{ title }} .base-header
.icon-cancel.text-sm(@click="value = false", v-if="!showIcon") .header-title.text {{ title }}
slot .icon-cancel.text-sm(@click="value = false", v-if="!showIcon")
slot
</template> </template>
@@ -77,4 +78,13 @@ export default {
margin-right: -11px margin-right: -11px
cursor: pointer cursor: pointer
color: var(--font-grey-color) color: var(--font-grey-color)
.v-enter-active,
.v-leave-active
transition: opacity 0.3s ease-in-out
.v-enter-from,
.v-leave-to
opacity: 0
</style> </style>