From 26e259be8ed5b25f265d4dcdc23d86a68a060c78 Mon Sep 17 00:00:00 2001 From: Max Lynch Date: Tue, 24 Sep 2013 15:49:55 -0500 Subject: [PATCH] Fixed modal animations --- dist/ionic.css | 27 ++++++++++++--------------- scss/ionic/_animations.scss | 19 ++++++++----------- 2 files changed, 20 insertions(+), 26 deletions(-) diff --git a/dist/ionic.css b/dist/ionic.css index dd66278e7d..0fe6b19d1d 100644 --- a/dist/ionic.css +++ b/dist/ionic.css @@ -2139,21 +2139,18 @@ a.button { transition: transform .25s ease-in-out, opacity 1ms .25s; } */ -.slide-in-up { +.slide-in-up.enter { + -webkit-transition: -webkit-transform 0.25s, opacity 0.25s; + transition: transform 0.25s, opacity 0.25s; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition-timing-function: cubic-bezier(0.1, 0.5, 0.1, 1); } - .slide-in-up.enter { - -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s; - transition: transform 0.25s, opacity 1ms 0.25s; } - .slide-in-up.enter-active { - -webkit-transition: -webkit-transform 0.25s; - transition: transform 0.25s; - -webkit-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); } - .slide-in-up.leave { - -webkit-transition: -webkit-transform 0.25s, opacity 1ms 0.25s; - transition: transform 0.25s, opacity 1ms 0.25s; } - .slide-in-up.leave-active { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); } +.slide-in-up.enter-active { + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); } +.slide-in-up.leave { + -webkit-transition: -webkit-transform 0.25s, opacity 0.25s; + transition: transform 0.25s, opacity 0.25s; } +.slide-in-up.leave-active { + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); } diff --git a/scss/ionic/_animations.scss b/scss/ionic/_animations.scss index 779feca4c8..fdfa15c4a3 100644 --- a/scss/ionic/_animations.scss +++ b/scss/ionic/_animations.scss @@ -11,28 +11,25 @@ $bezier-function: cubic-bezier(.1, .5, .1, 1); */ .slide-in-up { - -webkit-transform: translate3d(0, 100%, 0); - transform: translate3d(0, 100%, 0); - - -webkit-transition-timing-function: $bezier-function; - &.enter { + -webkit-transition: -webkit-transform .25s, opacity .25s; + transition: transform .25s, opacity .25s; - -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; - transition: transform .25s, opacity 1ms .25s; + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); + + -webkit-transition-timing-function: $bezier-function; } &.enter-active { - -webkit-transition: -webkit-transform .25s; - transition: transform .25s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } &.leave { - -webkit-transition: -webkit-transform .25s, opacity 1ms .25s; - transition: transform .25s, opacity 1ms .25s; + -webkit-transition: -webkit-transform .25s, opacity .25s; + transition: transform .25s, opacity .25s; } &.leave-active {