mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-09 04:31:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(select): new animation

Browse Source
This commit is contained in:
07akioni 2019-07-26 17:58:25 +08:00
parent 77b3ddad66
commit fdfbf2ece6
4 changed files with 24 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "naive-ui",
"version": "0.2.40",
"version": "0.2.41",
"description": "",
"main": "index.js",
"scripts": {

34
packages/utils/dom/calcPlacementTransform.js
View File

@ -1,37 +1,37 @@
export default function calcPlacementTransform (placement, activatorRect, popoverRect) {
export default function calcPlacementTransform (placement, activatorRect, contentRect) {
let contentLeft, contentTop
let suggesetedTransfromOrigin = 'none'
if (placement === 'top-start') {
contentTop = activatorRect.top - popoverRect.height
contentTop = activatorRect.top - contentRect.height
contentLeft = activatorRect.left
} else if (placement === 'top') {
contentTop = activatorRect.top - popoverRect.height
contentLeft = activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2
contentTop = activatorRect.top - contentRect.height
contentLeft = activatorRect.left + activatorRect.width / 2 - contentRect.width / 2
} else if (placement === 'top-end') {
contentTop = activatorRect.top - popoverRect.height
contentLeft = activatorRect.left + activatorRect.width - popoverRect.width
contentTop = activatorRect.top - contentRect.height
contentLeft = activatorRect.left + activatorRect.width - contentRect.width
} else if (placement === 'left-start') {
contentTop = activatorRect.top
contentLeft = activatorRect.left - popoverRect.width
contentLeft = activatorRect.left - contentRect.width
} else if (placement === 'left') {
contentTop = activatorRect.top + activatorRect.height / 2 - popoverRect.height / 2
contentLeft = activatorRect.left - popoverRect.width
contentTop = activatorRect.top + activatorRect.height / 2 - contentRect.height / 2
contentLeft = activatorRect.left - contentRect.width
} else if (placement === 'left-end') {
contentTop = activatorRect.top + activatorRect.height - popoverRect.height
contentLeft = activatorRect.left - popoverRect.width
contentTop = activatorRect.top + activatorRect.height - contentRect.height
contentLeft = activatorRect.left - contentRect.width
} else if (placement === 'right-start') {
contentTop = activatorRect.top
contentLeft = activatorRect.left + activatorRect.width
} else if (placement === 'right') {
contentTop = activatorRect.top + activatorRect.height / 2 - popoverRect.height / 2
contentTop = activatorRect.top + activatorRect.height / 2 - contentRect.height / 2
contentLeft = activatorRect.left + activatorRect.width
} else if (placement === 'right-end') {
contentTop = activatorRect.top + activatorRect.height - popoverRect.height
contentTop = activatorRect.top + activatorRect.height - contentRect.height
contentLeft = activatorRect.left + activatorRect.width
} else if (placement === 'bottom-start') {
const toWindowBottom = window.innerHeight - activatorRect.bottom
if (popoverRect.height > toWindowBottom) {
contentTop = activatorRect.top - popoverRect.height
if (contentRect.height > toWindowBottom) {
contentTop = activatorRect.top - contentRect.height
suggesetedTransfromOrigin = 'bottom left'
} else {
contentTop = activatorRect.top + activatorRect.height
@ -40,10 +40,10 @@ export default function calcPlacementTransform (placement, activatorRect, popove
contentLeft = activatorRect.left
} else if (placement === 'bottom-end') {
contentTop = activatorRect.top + activatorRect.height
contentLeft = activatorRect.left + activatorRect.width - popoverRect.width
contentLeft = activatorRect.left + activatorRect.width - contentRect.width
} else {
contentTop = activatorRect.top + activatorRect.height
contentLeft = activatorRect.left + activatorRect.width / 2 - popoverRect.width / 2
contentLeft = activatorRect.left + activatorRect.width / 2 - contentRect.width / 2
}
/**
* We could also change the position using transform.

18
styles/Select.scss
View File

@ -253,8 +253,11 @@
transform: translateZ(0);
.n-select-menu__content {
@include detachedContent;
margin-top: 4px;
overflow: hidden;
border-radius: 9px;
.n-select-menu {
margin-top: 4px;
margin-bottom: 4px;
z-index: 0;
position: relative;
overflow-x: hidden;
@ -263,7 +266,9 @@
background-color: rgba(75, 81, 106, 1);
box-shadow: 0px 2px 20px 0px rgba(0,0,0,0.16);
@include scrollbar;
@include fade-in-transition(select-menu);
.n-select-menu__item {
cursor: pointer;
position: relative;
padding: 0px 14px;
white-space: nowrap;
@ -334,17 +339,6 @@
}
}
}
/** transition of menu */
.n-select-menu--transition-enter-active {
transition: opacity .3s $fast-in-cubic-bezier, transform .3s $fast-in-cubic-bezier;
}
.n-select-menu--transition-leave-active {
transition: opacity .3s $slow-out-cubic-bezier, transform .3s $slow-out-cubic-bezier;
}
.n-select-menu--transition-enter, .n-select-menu--transition-leave-to {
opacity: 0;
transform: translateY(4px);
}
/** transition of menu light bar */
.n-select-menu__light-bar--transition-enter-active {
transition: opacity .15s $fast-in-cubic-bezier, top .3s $default-cubic-bezier!important;

20
styles/theme/default.scss
View File

@ -164,26 +164,6 @@ $default-font-family: 'Lato';
}
}
@mixin fade-in-transition($block) {
&.#{$namespace}-#{$block}--transition-enter-active,
&.#{$namespace}-#{$block}--transition-leave-active {
transform: scale(1);
opacity: 1;
}
&.#{$namespace}-#{$block}--transition-enter-active {
transform-origin: left top;
transition: opacity .2s $fast-in-cubic-bezier, transform .2s $fast-in-cubic-bezier;
}
&.#{$namespace}-#{$block}--transition-enter, &.#{$namespace}-#{$block}--transition-leave-to {
opacity: 0;
transform-origin: left top;
transform: scale(.9);
}
&.#{$namespace}-#{$block}--transition-leave-to {
transition: opacity .2s $slow-out-cubic-bezier, transform .2s $slow-out-cubic-bezier;
}
}
@mixin fade-in-transition($block, $origin: inherit) {
&.#{$namespace}-#{$block}--transition-enter-active,
&.#{$namespace}-#{$block}--transition-leave-active {