ElyBy-Mirror/accounts-frontend
1
0
Fork 0
mirror of https://github.com/elyby/accounts-frontend.git synced 2025-01-16 00:23:10 +05:30
Code Issues Packages Projects Releases Wiki Activity

Немного изменены анимации для попапа

Browse Source
This commit is contained in:
ErickSkrauch 2016-06-05 19:12:48 +03:00
parent d3c68e8847
commit 51e443e74a
2 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/ui/popup/popup.scss
View File

@ -20,6 +20,8 @@ $popupPadding: 20px;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
perspective: 600px;
&:before { &:before {
content: ''; content: '';
display: inline-block; display: inline-block;
@ -104,12 +106,14 @@ $popupPadding: 20px;
/** /**
* Transition states * Transition states
*/ */
$popupInitPosition: translateY(10%) rotateX(-8deg);
.trEnter { .trEnter {
opacity: 0; opacity: 0;
.popup { .popup {
opacity: 0; opacity: 0;
transform: translateY(-30%); transform: $popupInitPosition;
} }
&Active { &Active {
@ -118,8 +122,8 @@ $popupPadding: 20px;
.popup { .popup {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0) rotateX(0deg);
transition: 0.2s ease; transition: 0.3s cubic-bezier(0.23, 1, 0.32, 1); // easeOutQuint
} }
} }
} }
@ -138,8 +142,8 @@ $popupPadding: 20px;
.popup { .popup {
opacity: 0; opacity: 0;
transform: translateY(30%); transform: $popupInitPosition;
transition: 0.2s ease; transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); // easeOutQuart
} }
} }
} }

2
src/pages/root/root.scss
View File

@ -16,7 +16,7 @@ $userBarHeight: 50px;
.isPopupActive { .isPopupActive {
filter: blur(5px); filter: blur(5px);
transition: filter 0.4s ease; transition: filter 0.4s 0.1s ease;
overflow: hidden; overflow: hidden;
} }