Permalink
Browse files

small fixes and added legacy support to README

  • Loading branch information...
1 parent 7e60f10 commit 42fafd450d59f61233ffd3c05fc958d3b5b95396 Jared Hardy committed Jan 8, 2013
Showing with 94 additions and 81 deletions.
  1. +58 −38 README.md
  2. +1 −8 stylesheets/ceaser-easing/_ceaser.sass
  3. +35 −35 templates/project/_ceaser.sass
View
@@ -43,23 +43,23 @@ The ceaser easing function
#transition {
transition-property: all;
transition-duration: 1.2s;
- transition-timing-function: ceaser("ease-in");
+ transition-timing-function: ceaser($ease-in);
}
#transition-shorthand {
- transition: all 1.2s ceaser("ease-in");
+ transition: all 1.2s ceaser($ease-in);
}
#animation {
animation-name: animateMe;
animation-iteration-count: infinite;
animation-duration: 10s;
- animation-timing-function: ceaser("easeInSine");
+ animation-timing-function: ceaser($easeInSine);
}
#animation-shorthand {
- animation: animateMe 10s ceaser("easeInSine") infinite
+ animation: animateMe 10s ceaser($easeInSine) infinite
}
@@ -68,37 +68,37 @@ Ease Types
----------
Here is a list of all the available easing types to choose from, you can see an example of each on the original [demo page](http://matthewlein.com/ceaser/)
- linear
- ease (default)
- ease-in
- ease-out
- ease-in-out
-
- easeInQuad
- easeInCubic
- easeInQuart
- easeInQuint
- easeInSine
- easeInExpo
- easeInCirc
- easeInBack
-
- easeOutQuad
- easeOutCubic
- easeOutQuart
- easeOutQuint
- easeOutSine
- easeOutExpo
- easeOutCirc
- easeOutBack
-
- easeInOutQuad
- easeInOutCubic
- easeInOutQuart
- easeInOutQuint
- easeInOutSine
- easeInOutExpo
- easeInOutCirc
+ $linear
+ $ease (default)
+ $ease-in
+ $ease-out
+ $ease-in-out
+
+ $easeInQuad
+ $easeInCubic
+ $easeInQuart
+ $easeInQuint
+ $easeInSine
+ $easeInExpo
+ $easeInCirc
+ $easeInBack
+
+ $easeOutQuad
+ $easeOutCubic
+ $easeOutQuart
+ $easeOutQuint
+ $easeOutSine
+ $easeOutExpo
+ $easeOutCirc
+ $easeOutBack
+
+ $easeInOutQuad
+ $easeInOutCubic
+ $easeInOutQuart
+ $easeInOutQuint
+ $easeInOutSine
+ $easeInOutExpo
+ $easeInOutCirc
easeInOutBack
@@ -112,22 +112,42 @@ The ceaser easing extension provides a mixin called ceaser. You pass what type o
@mixin ceaser-transition(ease type, transition property, duration, delay)
# Example mixin call that will create a 3 second transition with the ease type of ease-in
- @include ceaser-transition(ease-in, all, 3s)
+ @include ceaser-transition($ease-in, all, 3s)
# Example mixin call that will create a 500 milliseconds transition on only the width property with a delay of 1 second
- @include ceaser-transition(easeInOutExpo, width, 500ms, 1s)
+ @include ceaser-transition($easeInOutExpo, width, 500ms, 1s)
As an example, here is how create the above transition for an html element with id of box.
#box {
width: 500px;
- @include ceaser-transition(easeInOutExpo, width, 500ms, 1s);
+ @include ceaser-transition($easeInOutExpo, width, 500ms, 1s);
}
#box:hover {
width: 700px;
}
+Legacy Support
+-----------------------
+In this new version of ceaser-easing easing types have move to sass variables instead of using strings. Below is a comparison of the old and new syntax:
+
+ .old-syntax {
+ transition-property: all;
+ transition-duration: 1.2s;
+ transition-timing-function: ceaser("ease-in");
+ }
+
+ .new-syntax {
+ transition-property: all;
+ transition-duration: 1.2s;
+ transition-timing-function: ceaser($ease-in);
+ }
+
+For legacy purpose for this update you can use the old syntax but have to be sure enable legacy support by setting the ceaser-legacy variable to true like this:
+
+ #Legacy Variable
+ $ceaser-legacy: true
@@ -2,7 +2,7 @@
@import "ease-types"
@import "easing-vars"
-$legacy: false !default
+$ceaser-legacy: false !default
@function ceaser($type: $ease)
@if $legacy
@@ -11,17 +11,10 @@ $legacy: false !default
@else
@return cubic-bezier(unquote($type))
-<<<<<<< HEAD
-
-@mixin ceaser-transition($type: "ease", $properties: all, $duration: 500ms, $delay: 0ms)
- $easingValue : returnEaseType($type)
- @include transition($properties $duration cubic-bezier(unquote($easingValue)) $delay)
-=======
@mixin ceaser-transition($type: $ease, $properties: all, $duration: 500ms, $delay: 0ms)
@if $legacy
$easingValue : returnEaseType($type)
@include transition($properties $duration cubic-bezier(unquote($easingValue)) $delay)
@else
@include transition($properties $duration cubic-bezier(unquote($type)) $delay)
->>>>>>> use_bundler
@@ -5,13 +5,13 @@
#transition
-webkit-transition-property: all
-webkit-transition-duration: 1.2s
- -webkit-transition-timing-function: ceaser("ease-in")
+ -webkit-transition-timing-function: ceaser($ease-in)
#animation
-webkit-animation-name: animateMe
-webkit-animation-iteration-count: infinite
- -webkit-animation-timing-function: ceaser("easeInSine")
+ -webkit-animation-timing-function: ceaser($easeInSine)
-webkit-animation-duration: 10s
@@ -22,44 +22,44 @@
// here is how to create that transition for an html element with id of box.
#ceaser-transition
- @include ceaser-transition("easeInOutExpo", width, 500ms, 1s)
+ @include ceaser-transition($easeInOutExpo, width, 500ms, 1s)
/* ==========================
List of all timing function
- * linear
- * ease (default)
- * ease-in
- * ease-out
- * ease-in-out
- *
- * easeInQuad
- * easeInCubic
- * easeInQuart
- * easeInQuint
- * easeInSine
- * easeInExpo
- * easeInCirc
- * easeInBack
- *
- * easeOutQuad
- * easeOutCubic
- * easeOutQuart
- * easeOutQuint
- * easeOutSine
- * easeOutExpo
- * easeOutCirc
- * easeOutBack
- *
- * easeInOutQuad
- * easeInOutCubic
- * easeInOutQuart
- * easeInOutQuint
- * easeInOutSine
- * easeInOutExpo
- * easeInOutCirc
- * easeInOutBack
+ * $linear
+ * $ease (default)
+ * $ease-in
+ * $ease-out
+ * $ease-in-out
+
+ * $easeInQuad
+ * $easeInCubic
+ * $easeInQuart
+ * $easeInQuint
+ * $easeInSine
+ * $easeInExpo
+ * $easeInCirc
+ * $easeInBack
+
+ * $easeOutQuad
+ * $easeOutCubic
+ * $easeOutQuart
+ * $easeOutQuint
+ * $easeOutSine
+ * $easeOutExpo
+ * $easeOutCirc
+ * $easeOutBack
+
+ * $easeInOutQuad
+ * $easeInOutCubic
+ * $easeInOutQuart
+ * $easeInOutQuint
+ * $easeInOutSine
+ * $easeInOutExpo
+ * $easeInOutCirc
+ * $easeInOutBack
======================== */

0 comments on commit 42fafd4

Please sign in to comment.