Skip to content

Instantly share code, notes, and snippets.

@daleyjem
Created December 10, 2014 21:22
Show Gist options
  • Save daleyjem/5e309f9d7719be8815b9 to your computer and use it in GitHub Desktop.
Save daleyjem/5e309f9d7719be8815b9 to your computer and use it in GitHub Desktop.
angular view transitions
.slide-down-cover {
@include z-index(base, 1);
&.ng-enter,
&.ng-leave {
transition: all 0.5s ease-out;
}
&.ng-enter {
transform: translate(0, -100%);
@include z-index(base, 1);
}
&.ng-enter-active {
transform: translate(0, 0);
@include z-index(base, 1);
}
&.ng-leave {
@include z-index(base);
}
&.ng-leave-active {
@include z-index(base);
}
}
// Mobile Only
.slide-down-cover_mobile-only {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base, 1);
}
&.ng-enter,
&.ng-leave {
@media screen and (max-width: $tablet-sm - 1) {
transition: all 0.5s ease-out;
}
}
&.ng-enter {
@media screen and (max-width: $tablet-sm - 1) {
transform: translate(0, -100%);
@include z-index(base, 1);
}
}
&.ng-enter-active {
@media screen and (max-width: $tablet-sm - 1) {
transform: translate(0, 0);
@include z-index(base, 1);
}
}
&.ng-leave {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base);
}
}
&.ng-leave-active {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base);
}
}
}
// Tablet Only
.slide-down-cover_tablet-only {
@media screen and (min-width: $tablet-sm) {
@include z-index(base, 1);
}
&.ng-enter,
&.ng-leave {
@media screen and (min-width: $tablet-sm) {
transition: all 0.5s ease-out;
}
}
&.ng-enter {
@media screen and (min-width: $tablet-sm) {
transform: translate(0, -100%);
@include z-index(base, 1);
}
}
&.ng-enter-active {
@media screen and (min-width: $tablet-sm) {
transform: translate(0, 0);
@include z-index(base, 1);
}
}
&.ng-leave {
@media screen and (min-width: $tablet-sm) {
@include z-index(base);
}
}
&.ng-leave-active {
@media screen and (min-width: $tablet-sm) {
@include z-index(base);
}
}
}
.slide-down-reveal {
@include z-index(base, 1);
&.ng-enter,
&.ng-leave {
transition: all 0.5s ease-out;
}
&.ng-enter {
@include z-index(base);
}
&.ng-enter-active {
@include z-index(base);
}
&.ng-leave {
transform: translate(0, 0);
@include z-index(base, 1);
}
&.ng-leave-active {
transform: translate(0, 100%);
@include z-index(base, 1);
}
}
// Mobile Only
.slide-down-reveal_mobile-only {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base, 1);
}
&.ng-enter,
&.ng-leave {
@media screen and (max-width: $tablet-sm - 1) {
transition: all 0.5s ease-out;
}
}
&.ng-enter {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base);
}
}
&.ng-enter-active {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base);
}
}
&.ng-leave {
@media screen and (max-width: $tablet-sm - 1) {
transform: translate(0, 0);
@include z-index(base, 1);
}
}
&.ng-leave-active {
@media screen and (max-width: $tablet-sm - 1) {
transform: translate(0, 100%);
@include z-index(base, 1);
}
}
}
// Tablet Only
.slide-down-reveal_tablet-only {
@media screen and (min-width: $tablet-sm) {
@include z-index(base, 1);
}
&.ng-enter,
&.ng-leave {
@media screen and (min-width: $tablet-sm) {
transition: all 0.5s ease-out;
}
}
&.ng-enter {
@media screen and (min-width: $tablet-sm) {
@include z-index(base);
}
}
&.ng-enter-active {
@media screen and (min-width: $tablet-sm) {
@include z-index(base);
}
}
&.ng-leave {
@media screen and (min-width: $tablet-sm) {
transform: translate(0, 0);
@include z-index(base, 1);
}
}
&.ng-leave-active {
@media screen and (min-width: $tablet-sm) {
transform: translate(0, 100%);
@include z-index(base, 1);
}
}
}
.slide-up-cover {
@include z-index(base, 1);
&.ng-enter,
&.ng-leave {
transition: all 0.5s ease-out;
}
&.ng-enter {
transform: translate(0, 100%);
@include z-index(base, 1);
}
&.ng-enter-active {
transform: translate(0, 0);
@include z-index(base, 1);
}
&.ng-leave {
@include z-index(base);
}
&.ng-leave-active {
@include z-index(base);
}
}
// Mobile Only
.slide-up-cover_mobile-only {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base, 1);
}
&.ng-enter,
&.ng-leave {
@media screen and (max-width: $tablet-sm - 1) {
transition: all 0.5s ease-out;
}
}
&.ng-enter {
@media screen and (max-width: $tablet-sm - 1) {
transform: translate(0, 100%);
@include z-index(base, 1);
}
}
&.ng-enter-active {
@media screen and (max-width: $tablet-sm - 1) {
transform: translate(0, 0);
@include z-index(base, 1);
}
}
&.ng-leave {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base);
}
}
&.ng-leave-active {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base);
}
}
}
// Tablet Only
.slide-up-cover_tablet-only {
@media screen and (min-width: $tablet-sm) {
@include z-index(base, 1);
}
&.ng-enter,
&.ng-leave {
@media screen and (min-width: $tablet-sm) {
transition: all 0.5s ease-out;
}
}
&.ng-enter {
@media screen and (min-width: $tablet-sm) {
transform: translate(0, 100%);
@include z-index(base, 1);
}
}
&.ng-enter-active {
@media screen and (min-width: $tablet-sm) {
transform: translate(0, 0);
@include z-index(base, 1);
}
}
&.ng-leave {
@media screen and (min-width: $tablet-sm) {
@include z-index(base);
}
}
&.ng-leave-active {
@media screen and (min-width: $tablet-sm) {
@include z-index(base);
}
}
}
.slide-up-reveal {
@include z-index(base, 1);
&.ng-enter,
&.ng-leave {
transition: all 0.5s ease-out;
}
&.ng-enter {
@include z-index(base);
}
&.ng-enter-active {
@include z-index(base);
}
&.ng-leave {
transform: translate(0, 0);
@include z-index(base, 1);
}
&.ng-leave-active {
transform: translate(0, -100%);
@include z-index(base, 1);
}
}
// Mobile Only
.slide-up-reveal_mobile-only {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base, 1);
}
&.ng-enter,
&.ng-leave {
@media screen and (max-width: $tablet-sm - 1) {
transition: all 0.5s ease-out;
}
}
&.ng-enter {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base);
}
}
&.ng-enter-active {
@media screen and (max-width: $tablet-sm - 1) {
@include z-index(base);
}
}
&.ng-leave {
@media screen and (max-width: $tablet-sm - 1) {
transform: translate(0, 0);
@include z-index(base, 1);
}
}
&.ng-leave-active {
@media screen and (max-width: $tablet-sm - 1) {
transform: translate(0, -100%);
@include z-index(base, 1);
}
}
}
// Tablet Only
.slide-up-reveal_tablet-only {
@media screen and (min-width: $tablet-sm) {
@include z-index(base, 1);
}
&.ng-enter,
&.ng-leave {
@media screen and (min-width: $tablet-sm) {
transition: all 0.5s ease-out;
}
}
&.ng-enter {
@media screen and (min-width: $tablet-sm) {
@include z-index(base);
}
}
&.ng-enter-active {
@media screen and (min-width: $tablet-sm) {
@include z-index(base);
}
}
&.ng-leave {
@media screen and (min-width: $tablet-sm) {
transform: translate(0, 0);
@include z-index(base, 1);
}
}
&.ng-leave-active {
@media screen and (min-width: $tablet-sm) {
transform: translate(0, -100%);
@include z-index(base, 1);
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment