valitydev/checkout
14
0
Fork 0
mirror of https://github.com/valitydev/checkout.git synced 2024-11-06 10:35:20 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

FE-507: leave animations (#149)

Browse Source 
* FE-507: added leave animation
This commit is contained in:
Alexandra Usacheva 2017-11-24 12:45:10 +03:00 committed by GitHub
parent b929ea1d4c
commit 35458e3982
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 88 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/components/container/3ds/3ds.scss.d.ts vendored
View File

@ -5,8 +5,10 @@ export const rotateout: string;
export const appear: string;
export const rotatein: string;
export const fadein: string;
export const fadeout: string;
export const slidedown: string;
export const slideup: string;
export const growth: string;
export const popup: string;
export const popout: string;
export const shake: string;

2
src/app/components/container/container-loader/container-loader.scss.d.ts vendored
View File

@ -1,9 +1,11 @@
export const loader: string;
export const growth: string;
export const fadein: string;
export const fadeout: string;
export const slidedown: string;
export const slideup: string;
export const popup: string;
export const popout: string;
export const rotatein: string;
export const rotateout: string;
export const shake: string;

31
src/app/components/container/container.scss
View File

@ -74,24 +74,35 @@
}
}
.popup {
.appearContainer {
@include responsive(sm) {
animation: popup .75s;
//animation: popup .75s;
animation: popout 1s;
}
}
.enter {
.enterContainer {
background: green;
}
.leave {
@include responsive(sm) {
animation: rotateout 0s;
}
}
.appear {
.leaveContainer {
@include responsive(sm) {
animation: rotatein 0s;
}
}
.appearFormContainer {
@include responsive(sm) {
animation: rotatein 0s;
}
}
.enterFormContainer {
background: green;
}
.leaveFormContainer {
@include responsive(sm) {
animation: rotateout 0s;
}
}

15
src/app/components/container/container.scss.d.ts vendored
View File

@ -3,13 +3,18 @@ export const overlay: string;
export const fadein: string;
export const container: string;
export const form_container: string;
export const popup: string;
export const enter: string;
export const leave: string;
export const rotateout: string;
export const appear: string;
export const appearContainer: string;
export const popout: string;
export const enterContainer: string;
export const leaveContainer: string;
export const rotatein: string;
export const appearFormContainer: string;
export const enterFormContainer: string;
export const leaveFormContainer: string;
export const rotateout: string;
export const fadeout: string;
export const slidedown: string;
export const slideup: string;
export const growth: string;
export const popup: string;
export const shake: string;

23
src/app/components/container/container.tsx
View File

@ -23,7 +23,20 @@ export class Container extends React.Component {
<div className={styles.mainContainer}>
<div className={styles.overlay} />
{Container.getView() === 'loading' ? <ContainerLoader/> : false}
<div className={styles.popup}>
<CSSTransitionGroup
component='div'
transitionName={{
appear: styles.appearContainer,
enter: styles.enterContainer,
leave: styles.leaveContainer
}}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
transitionAppearTimeout={1000}
transitionAppear={true}
transitionEnter={true}
transitionLeave={true}
>
{Container.getView() !== 'loading' ?
<div className={styles.container}>
<Close />
@ -31,9 +44,9 @@ export class Container extends React.Component {
<CSSTransitionGroup
component='div'
transitionName={{
appear: styles.appear,
enter: styles.enter,
leave: styles.leave
appear: styles.appearFormContainer,
enter: styles.enterFormContainer,
leave: styles.leaveFormContainer
}}
transitionEnterTimeout={1000}
transitionLeaveTimeout={1000}
@ -55,7 +68,7 @@ export class Container extends React.Component {
: false
}
{Container.getView() !== 'loading' && Container.getView() !== '3ds' ? <Footer/> : false}
</div>
</CSSTransitionGroup>
</div>
);
}

26
src/app/components/container/footer/footer.scss
View File

@ -1,13 +1,14 @@
@import '../../../styles/variables';
@import '../../../styles/responsive';
$localWhite: rgba(255, 255, 255, .6);
.footer {
padding: 30px 25px;
@include responsive(sm) {
width: 680px;
padding: 15px 0;
opacity: .6;
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -45,7 +46,8 @@
margin: 0;
@include responsive(sm) {
color: $white;
color: $localWhite;
transform: translateZ(0); //transparency chrome fix
}
}
@ -63,10 +65,11 @@
@include responsive(sm) {
path {
stroke: $white;
stroke: $localWhite;
}
rect {
fill: $white;
fill: $localWhite;
}
}
}
@ -90,6 +93,7 @@
.visa_icon {
height: 32px;
width: 59px;
transform: translateZ(0); //transparency chrome fix
}
.mc_icon {
@ -97,6 +101,7 @@
width: 63px;
position: relative;
top: 4px;
transform: translateZ(0); //transparency chrome fix
}
.pci_icon {
@ -104,6 +109,7 @@
width: 63px;
position: relative;
top: 4px;
transform: translateZ(0); //transparency chrome fix
}
}
@ -118,7 +124,8 @@
margin: 0 0 20px;
@include responsive(sm) {
color: $white;
color: $localWhite;
transform: translateZ(0); //transparency chrome fix
}
}
@ -143,10 +150,13 @@
}
@include responsive(sm) {
color: $white;
color: $localWhite;
transform: translateZ(0); //transparency chrome fix
hr {
border-color: $white;
border-color: $localWhite;
transform: translateZ(0); //transparency chrome fix
}
}
}
@ -155,6 +165,6 @@
fill: $lightest-purple2;
@include responsive(sm) {
fill: $white;
fill: $localWhite;
}
}

2
src/app/components/container/forms/forms.scss.d.ts vendored
View File

@ -6,9 +6,11 @@ export const header: string;
export const back_btn: string;
export const title: string;
export const fadein: string;
export const fadeout: string;
export const slidedown: string;
export const slideup: string;
export const growth: string;
export const popup: string;
export const popout: string;
export const rotatein: string;
export const rotateout: string;

2
src/app/components/container/forms/payment-methods/payment-methods.scss.d.ts vendored
View File

@ -10,8 +10,10 @@ export const enterItem: string;
export const leaveItem: string;
export const slideup: string;
export const fadein: string;
export const fadeout: string;
export const growth: string;
export const popup: string;
export const popout: string;
export const rotatein: string;
export const rotateout: string;
export const shake: string;

13
src/app/styles/animations.scss
View File

@ -5,6 +5,12 @@
to { opacity: 1; }
}
/* FADE OUT ANIMATION */
@keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
/* SLIDE DOWN FADE IN */
@keyframes slidedown {
from { transform: translateY(-15px); opacity: 0; }
@ -29,6 +35,13 @@
to { transform: perspective(0) rotate3d(0, 1, 0, 0) translateY(0); opacity: 1; }
}
/* POPOUT ANIMATION */
@keyframes popout {
0% { transform: translateY(0); opacity: 1; }
25% { transform: translateY(-30px); opacity: 1; }
100% { transform: translateY(500px); opacity: 0; }
}
/* ROTATE IN ANIMATION */
@keyframes rotatein {
from { transform: perspective(1000px) rotate3d(0, 1, 0, 90deg); }