Fixing anims

2026-03-13 10:22:08 +08:00 · 2013-12-04 11:57:16 -06:00
parent 84fe1c99ab
commit 6f3f36917f
5 changed files with 131 additions and 129 deletions
--- a/dist/css/ionic.css
+++ b/dist/css/ionic.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
 * Copyright 2013 Drifty Co.
 * http://drifty.com/
@@ -5101,6 +5102,13 @@ a.button {
    border-right-width: 1px;
    border-radius: 0px 2px 2px 0px; }

+/**
+ * Animations
+ * --------------------------------------------------
+ * The animations in this file are "simple" - not too complex
+ * and pretty easy on performance. They can be overidden
+ * and enhanced easily.
+ */
 /**
 * Keyframes
 * --------------------------------------------------
@@ -5243,13 +5251,6 @@ a.button {
  100% {
    transform: rotate(360deg); } }

-/**
- * Animations
- * --------------------------------------------------
- * The animations in this file are "simple" - not too complex
- * and pretty easy on performance. They can be overidden
- * and enhanced easily.
- */
 .noop-animation > .ng-enter, .noop-animation.ng-enter, .noop-animation > .ng-leave, .noop-animation.ng-leave {
  -webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
  -moz-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms;
--- a/dist/css/themes/ionic-ios7.css
+++ b/dist/css/themes/ionic-ios7.css
@@ -1,3 +1,4 @@
+@charset "UTF-8";
 /*!
 * Copyright 2013 Drifty Co.
 * http://drifty.com/
--- a/scss/_animations.scss
+++ b/scss/_animations.scss
@@ -8,6 +8,128 @@
 */
 $transition-duration: 250ms;

+
+/**
+ * Keyframes
+ * --------------------------------------------------
+ */
+
+
+// Slide In From Left
+// -------------------------------
+
+@-webkit-keyframes slideInFromLeft {
+    from { -webkit-transform: translate3d(-100%, 0, 0); }
+    to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideInFromLeft {
+    from { -moz-transform: translateX(-100%); }
+    to { -moz-transform: translateX(0); }
+}
+@keyframes slideInFromLeft {
+    from { transform: translateX(-100%); }
+    to { transform: translateX(0); }
+}
+
+
+// Slide In From Right
+// -------------------------------
+
+@-webkit-keyframes slideInFromRight {
+    from { -webkit-transform: translate3d(100%, 0, 0); }
+    to { -webkit-transform: translate3d(0, 0, 0); }
+}
+@-moz-keyframes slideInFromRight {
+    from { -moz-transform: translateX(100%); }
+    to { -moz-transform: translateX(0); }
+}
+@keyframes slideInFromRight {
+    from { transform: translateX(100%); }
+    to { transform: translateX(0); }
+}
+
+
+// Slide Out To Left
+// -------------------------------
+
+@-webkit-keyframes slideOutToleft {
+  from { -webkit-transform: translate3d(0, 0, 0); }
+  to { -webkit-transform: translate3d(-100%, 0, 0); }
+}
+@-moz-keyframes slideOutToleft {
+  from { -moz-transform: translateX(0); }
+  to { -moz-transform: translateX(-100%); }
+}
+@keyframes slideOutToLeft {
+  from { transform: translateX(0); }
+  to { transform: translateX(-100%); }
+}
+
+
+// Slide Out To Right
+// -------------------------------
+
+@-webkit-keyframes slideOutToRight {
+  from { -webkit-transform: translate3d(0, 0, 0); }
+  to { -webkit-transform: translate3d(100%, 0, 0); }
+}
+@-moz-keyframes slideOutToRight {
+  from { -moz-transform: translateX(0); }
+  to { -moz-transform: translateX(100%); }
+}
+@keyframes slideOutToRight {
+  from { transform: translateX(0); }
+  to { transform: translateX(100%); }
+}
+
+
+// Fade Out
+// -------------------------------
+
+@-webkit-keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@-moz-keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+
+// Fade In
+// -------------------------------
+
+@-webkit-keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@-moz-keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+
+// Spin
+// -------------------------------
+
+@-webkit-keyframes spin { 
+  100% { -webkit-transform: rotate(360deg); } 
+}
+@-moz-keyframes spin { 
+  100% { -moz-transform: rotate(360deg); } 
+}
+@keyframes spin { 
+  100% { transform: rotate(360deg); } 
+}
+
 .noop-animation {
  > .ng-enter, &.ng-enter, > .ng-leave, &.ng-leave {
    @include transition(all cubic-bezier(0.250, 0.460, 0.450, 0.940) $transition-duration);
--- a/scss/_keyframes.scss
+++ b/scss/_keyframes.scss
@@ -1,121 +0,0 @@
-
-/**
- * Keyframes
- * --------------------------------------------------
- */
-
-
-// Slide In From Left
-// -------------------------------
-
-@-webkit-keyframes slideInFromLeft {
-    from { -webkit-transform: translate3d(-100%, 0, 0); }
-    to { -webkit-transform: translate3d(0, 0, 0); }
-}
-@-moz-keyframes slideInFromLeft {
-    from { -moz-transform: translateX(-100%); }
-    to { -moz-transform: translateX(0); }
-}
-@keyframes slideInFromLeft {
-    from { transform: translateX(-100%); }
-    to { transform: translateX(0); }
-}
-
-
-// Slide In From Right
-// -------------------------------
-
-@-webkit-keyframes slideInFromRight {
-    from { -webkit-transform: translate3d(100%, 0, 0); }
-    to { -webkit-transform: translate3d(0, 0, 0); }
-}
-@-moz-keyframes slideInFromRight {
-    from { -moz-transform: translateX(100%); }
-    to { -moz-transform: translateX(0); }
-}
-@keyframes slideInFromRight {
-    from { transform: translateX(100%); }
-    to { transform: translateX(0); }
-}
-
-
-// Slide Out To Left
-// -------------------------------
-
-@-webkit-keyframes slideOutToleft {
-  from { -webkit-transform: translate3d(0, 0, 0); }
-  to { -webkit-transform: translate3d(-100%, 0, 0); }
-}
-@-moz-keyframes slideOutToleft {
-  from { -moz-transform: translateX(0); }
-  to { -moz-transform: translateX(-100%); }
-}
-@keyframes slideOutToLeft {
-  from { transform: translateX(0); }
-  to { transform: translateX(-100%); }
-}
-
-
-// Slide Out To Right
-// -------------------------------
-
-@-webkit-keyframes slideOutToRight {
-  from { -webkit-transform: translate3d(0, 0, 0); }
-  to { -webkit-transform: translate3d(100%, 0, 0); }
-}
-@-moz-keyframes slideOutToRight {
-  from { -moz-transform: translateX(0); }
-  to { -moz-transform: translateX(100%); }
-}
-@keyframes slideOutToRight {
-  from { transform: translateX(0); }
-  to { transform: translateX(100%); }
-}
-
-
-// Fade Out
-// -------------------------------
-
-@-webkit-keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-@-moz-keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-@keyframes fadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
-}
-
-
-// Fade In
-// -------------------------------
-
-@-webkit-keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@-moz-keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-@keyframes fadeIn {
-  from { opacity: 0; }
-  to { opacity: 1; }
-}
-
-
-// Spin
-// -------------------------------
-
-@-webkit-keyframes spin { 
-  100% { -webkit-transform: rotate(360deg); } 
-}
-@-moz-keyframes spin { 
-  100% { -moz-transform: rotate(360deg); } 
-}
-@keyframes spin { 
-  100% { transform: rotate(360deg); } 
-}
--- a/scss/ionic.scss
+++ b/scss/ionic.scss
@@ -53,7 +53,6 @@
  "button-bar",

  // Util
-  "keyframes",
  "animations",
  "grid",
  "util",