mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-18 12:34:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: modal animation

Browse Source
This commit is contained in:
07akioni 2019-06-25 18:20:49 +08:00
parent 1fe4eee121
commit 1e8c629157
5 changed files with 133 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
demo/components/tooltipDemo.vue
View File

@ -15,7 +15,9 @@
<div class="section">
<n-tooltip>
<template v-slot:activator>
<n-button>hello tooltip</n-button>
<n-button style="margin: 0;">
hello tooltip
</n-button>
</template>
<div>
This is the contextual help
@ -24,7 +26,7 @@
</div>
<textarea rows="5"><n-tooltip>
<template v-slot:activator>
<n-button>hello tooltip</n-button>
<n-button style="margin: 0;">hello tooltip</n-button>
</template>
<div>
This is the contextual help

43
packages/common/Modal/src/ModalContent.vue Normal file
View File

@ -0,0 +1,43 @@
<template>
<transition name="n-modal-content--transition">
<div
v-if="active"
:key="'content'"
class="n-modal-content"
v-on="$listeners"
>
<slot />
</div>
</transition>
</template>
<script>
export default {
props: {
active: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss">
.n-modal-content--transition-enter-active {
opacity: 1;
transition: opacity .3s cubic-bezier(0.0, 0.0, 0.2, 1), transform .3s cubic-bezier(0.0, 0.0, 0.2, 1);
transform: scale(1);
}
.n-modal-content--transition-leave-active {
opacity: 1;
transition: opacity .3s cubic-bezier(0.0, 0.0, 0.2, 1), transform .3s cubic-bezier(0.4, 0.0, 1, 1);
transform: scale(1);
}
.n-modal-content--transition-enter, .n-modal-content--transition-leave-to {
opacity: 0;
transform: scale(.75);
}
</style>

55
packages/common/Modal/src/Overlay.vue Normal file
View File

@ -0,0 +1,55 @@
<template>
<transition name="n-modal-overlay--transition">
<div
v-if="active"
:key="'overlay'"
class="n-modal-overlay"
v-on="$listeners"
/>
</transition>
</template>
<script>
export default {
props: {
active: {
type: Boolean,
default: false
}
}
}
</script>
<style lang="scss">
.n-modal-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .35);
}
.n-modal-content {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
}
.n-modal-overlay--transition-enter-active {
opacity: 1;
transition: opacity .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.n-modal-overlay--transition-leave-active {
opacity: 1;
transition: opacity .3s cubic-bezier(0.0, 0.0, 0.2, 1);
}
.n-modal-overlay--transition-enter, .n-modal-overlay--transition-leave-to {
opacity: 0;
}
</style>

63
packages/common/Modal/src/main.vue
View File

@ -1,4 +1,7 @@
<script>
import NModalOverlay from './Overlay'
import NModalContent from './ModalContent'
export default {
name: 'NModal',
model: {
@ -80,21 +83,31 @@ export default {
staticClass: 'n-modal-container',
ref: 'content',
class: {
'is-active': this.isActive
'n-modal-container--active': this.isActive
}
},
[h('div', {
staticClass: 'n-modal-overlay',
ref: 'overlay',
class: {
'is-active': this.isActive
},
// [h('div', {
// staticClass: 'n-modal-overlay',
// ref: 'overlay',
// class: {
// 'is-active': this.isActive
// },
// on: {
// click: this.deactivate
// }
// })
[h(NModalOverlay, {
props: { active: this.isActive }
}),
h(NModalContent, { ref: 'modalWrapper',
props: { active: this.isActive },
on: {
click: this.deactivate
}
}), h('div', {
staticClass: 'n-modal-content'
}, this.$slots.default)]
click: (e) => {
if (e.target.contains(this.$refs.modalWrapper.$el)) {
this.deactivate()
}
}
} }, this.$slots.default)]
)
])
}
@ -106,33 +119,13 @@ export default {
display: inline-block;
}
.n-modal-overlay {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .35);
display: none;
&.is-active {
display: block;
}
}
.n-modal-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: none;
height: 0;
width: 0;
overflow: auto;
&.is-active {
display: flex;
}
.n-modal-content {
position: relative;
margin: auto;
}
display: flex;
}
</style>

5
styles/Tooltip.scss
View File

@ -19,9 +19,9 @@
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(0px);
padding-top: 2px;
padding-top: 4px;
opacity: 1;
transition: opacity .3s $default-cubic-bezier, transform .3s $default-cubic-bezier;
transition: opacity .3s $default-cubic-bezier, transform .3s $fast-in-cubic-bezier;
.n-tooltip-popup__content {
white-space: nowrap;
border-radius: 6px;
@ -33,6 +33,7 @@
}
.n-tooltip__popup.is-vanishing {
opacity: 0;
transition: opacity .3s $default-cubic-bezier, transform .3s $slow-out-cubic-bezier!important;
transform: translateX(-50%) translateY(4px);
}
}