feat(share): add brief entry animation for the sharing view

This commit is contained in:
Jason Dreyzehner 2016-11-17 11:13:41 -05:00
commit d53f19bbbf
4 changed files with 19 additions and 12 deletions

View file

@ -6,10 +6,6 @@
/* Ionic Overrides and Workarounds */
// Please include a description of the problem solved by the workaround.
// class to dynamically hide the ion-nav-bar for v1 Amazon flow
// Fix hide-nav-bar (true|false)
//ion-nav-bar.hide { display: block !important; }
// the ion tabs element never needs it's own background (backgrounds are
// rendered by the tabs), and the default background would cover the scanner
ion-tabs.ion-tabs-transparent {

View file

@ -64,13 +64,13 @@
padding: 50px 10px 30px;
background-color: $subtle-gray;
text-align: center;
transition: transform .3s cubic-bezier(0.4, 0.0, 0.2, 1) .2s, opacity .5s ease-in .2s;
transform: translateY(100%);
opacity: 0;
&.slide-up {
transform: translateY(0);
opacity: 1;
}
animation-name: slideUpFadeIn;
animation-duration: .3s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1);
animation-delay: .2s;
}
.share-buttons__action {
display: inline-block;
@ -81,3 +81,14 @@
margin-bottom: 20px;
}
}
@keyframes slideUpFadeIn {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

View file

@ -28,11 +28,11 @@
padding: 10px 30px 20px 40px;
color: #667;
}
.buttons {
.rate-buttons {
bottom: 0;
width: 100%;
position: absolute;
background-color: $subtle-gray;
padding: 50px 0;
padding: 30px 0 15px;
}
}

View file

@ -9,7 +9,7 @@
<div class="subtitle">
<span class="text-bold" translate>Would you be willing to rate BitPay in the app store?</span>
</div>
<div class="buttons">
<div class="rate-buttons">
<button type="submit" class="button button-standard button-primary" ng-click="goAppStore()">
<span translate>Rate on the app store</span>
</button>