Implement SCSS version

README.md

@@ -28,16 +28,23 @@ Include the stylesheet:
   ```
 #### Less
   ```less
-  @import "<PATH_TO_SOURCE>/src/vue2-animate.less";
+  @import "<PATH_TO_SOURCE>/src/less/vue2-animate.less";
+  ```
+
+#### Sass/Scss
+  ```scss
+  $animationDuration: 0.5s; // specify animation duration. Default value: 1s
+  @import "<PATH_TO_SOURCE>/src/sass/vue2-animate.scss";
   ```
 
 #### Building
   ```shell
   git clone https://github.com/asika32764/vue2-animate.git
   cd vue2-animate
   npm install
-  npm run build #Compiled .css files go to the dist folder
+  npm run build #Compiled .css files go to the dist folder.
   ```
+You are able to build sass version with command `npm run build-sass`.
 
 ## Usage
 

dist/vue2-animate.css

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 /*!
- * vue2-animate v1.0.4
+ * vue2-animate v1.0.5
  * (c) 2016 Simon Asika
  * Released under the MIT License.
  * Documentation: https://github.com/asika32764/vue2-animate

package.json

@@ -23,7 +23,9 @@
     "vue.js",
     "transition",
     "vue-animate",
-    "css"
+    "css",
+    "sass",
+    "scss"
   ],
   "files": [
     "dist/vue2-animate.css",
@@ -33,11 +35,16 @@
   "devDependencies": {
     "less": "^2.4.0",
     "less-plugin-autoprefix": "^1.5.1",
-    "less-plugin-clean-css": "^1.5.0"
+    "less-plugin-clean-css": "^1.5.0",
+    "sass": "^1.1.1"
   },
   "scripts": {
-    "build": "lessc src/vue2-animate.less > dist/vue2-animate.css && lessc --clean-css='--compatibility=ie8 --advanced' src/vue2-animate.less > dist/vue2-animate.min.css",
-    "less": "lessc src/vue2-animate.less > dist/vue2-animate.css",
-    "minify": "lessc --clean-css='--compatibility=ie8 --advanced' src/vue2-animate.less > dist/vue2-animate.min.css"
+    "build": "npm run build-less",
+    "less": "lessc src/less/vue2-animate.less > dist/vue2-animate.css",
+    "minify-less": "lessc --clean-css='--compatibility=ie8 --advanced' src/less/vue2-animate.less > dist/vue2-animate.min.css",
+    "build-less": "npm run less && npm run minify-less",
+    "sass": "sass src/sass/vue2-animate.scss dist/vue2-animate.css",
+    "minify-sass": "sass --style='compressed' src/sass/vue2-animate.scss dist/vue2-animate.min.css",
+    "build-sass": "npm run sass && npm run minify-sass"
   }
 }

src/sass/animations/bouncing/all.scss

@@ -0,0 +1,8 @@
+@import 'bounce';
+@import 'bounceDown';
+@import 'bounceLeft';
+@import 'bounceRight';
+@import 'bounceUp';
+
+$bounces: Down, Left, Right, Up;
+@include make-transitions(bounce, $bounces);

src/sass/animations/bouncing/bounce.scss

@@ -0,0 +1,48 @@
+@keyframes bounceIn {
+  from, 20%, 40%, 60%, 80%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+
+  20% {
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  40% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  60% {
+    opacity: 1;
+    transform: scale3d(1.03, 1.03, 1.03);
+  }
+
+  80% {
+    transform: scale3d(.97, .97, .97);
+  }
+
+  to {
+    opacity: 1;
+    transform: scale3d(1, 1, 1);
+  }
+}
+
+@keyframes bounceOut {
+  20% {
+    transform: scale3d(.9, .9, .9);
+  }
+
+  50%, 55% {
+    opacity: 1;
+    transform: scale3d(1.1, 1.1, 1.1);
+  }
+
+  to {
+    opacity: 0;
+    transform: scale3d(.3, .3, .3);
+  }
+}

src/sass/animations/bouncing/bounceDown.scss

@@ -0,0 +1,43 @@
+@keyframes bounceInDown {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translate3d(0, -3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(0, 25px, 0);
+  }
+
+  75% {
+    transform: translate3d(0, -10px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, 5px, 0);
+  }
+
+  to {
+    transform: none;
+  }
+}
+
+@keyframes bounceOutDown {
+  20% {
+    transform: translate3d(0, 10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+}

src/sass/animations/bouncing/bounceLeft.scss

@@ -0,0 +1,39 @@
+@keyframes bounceInLeft {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  0% {
+    opacity: 0;
+    transform: translate3d(-3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(25px, 0, 0);
+  }
+
+  75% {
+    transform: translate3d(-10px, 0, 0);
+  }
+
+  90% {
+    transform: translate3d(5px, 0, 0);
+  }
+
+  to {
+    transform: none;
+  }
+}
+
+@keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+}

src/sass/animations/bouncing/bounceRight.scss

@@ -0,0 +1,39 @@
+@keyframes bounceInRight {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    transform: translate3d(3000px, 0, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(-25px, 0, 0);
+  }
+
+  75% {
+    transform: translate3d(10px, 0, 0);
+  }
+
+  90% {
+    transform: translate3d(-5px, 0, 0);
+  }
+
+  to {
+    transform: none;
+  }
+}
+
+@keyframes bounceOutRight {
+  20% {
+    opacity: 1;
+    transform: translate3d(-20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(2000px, 0, 0);
+  }
+}

src/sass/animations/bouncing/bounceUp.scss

@@ -0,0 +1,43 @@
+@keyframes bounceInUp {
+  from, 60%, 75%, 90%, to {
+    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+  }
+
+  from {
+    opacity: 0;
+    transform: translate3d(0, 3000px, 0);
+  }
+
+  60% {
+    opacity: 1;
+    transform: translate3d(0, -20px, 0);
+  }
+
+  75% {
+    transform: translate3d(0, 10px, 0);
+  }
+
+  90% {
+    transform: translate3d(0, -5px, 0);
+  }
+
+  to {
+    transform: translate3d(0, 0, 0);
+  }
+}
+
+@keyframes bounceOutUp {
+  20% {
+    transform: translate3d(0, -10px, 0);
+  }
+
+  40%, 45% {
+    opacity: 1;
+    transform: translate3d(0, 20px, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+}

src/sass/animations/fading/all.scss

@@ -0,0 +1,13 @@
+@import 'fade';
+@import 'fadeDown';
+@import 'fadeDownBig';
+@import 'fadeLeft';
+@import 'fadeLeftBig';
+@import 'fadeRight';
+@import 'fadeRightBig';
+@import 'fadeUp';
+@import 'fadeUpBig';
+
+$fades: Down, DownBig, Left, LeftBig, Right, RightBig, Up, UpBig;
+
+@include make-transitions(fade, $fades);

src/sass/animations/fading/fade.scss

@@ -0,0 +1,19 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

src/sass/animations/fading/fadeDown.scss

@@ -0,0 +1,22 @@
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -100%, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fadeOutDown {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 100%, 0);
+  }
+}

src/sass/animations/fading/fadeDownBig.scss

@@ -0,0 +1,22 @@
+@keyframes fadeInDownBig {
+  from {
+    opacity: 0;
+    transform: translate3d(0, -2000px, 0);
+  }
+
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@keyframes fadeOutDownBig {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(0, 2000px, 0);
+  }
+}