From 3c2bacea6ea697a31cfbcfa57da46dd03b310969 Mon Sep 17 00:00:00 2001 From: Pavel Savushkin Date: Tue, 3 Apr 2018 14:58:43 +0300 Subject: [PATCH] Move less files into own folder (src/less) Implement the same functionality based on SCSS. Update README.md --- README.md | 11 ++++- dist/vue2-animate.css | 2 +- dist/vue2-animate.min.css | 2 +- package.json | 17 +++++-- src/{ => less}/animations/bouncing/all.less | 0 .../animations/bouncing/bounce.less | 0 .../animations/bouncing/bounceDown.less | 0 .../animations/bouncing/bounceLeft.less | 0 .../animations/bouncing/bounceRight.less | 0 .../animations/bouncing/bounceUp.less | 0 src/{ => less}/animations/fading/all.less | 0 src/{ => less}/animations/fading/fade.less | 0 .../animations/fading/fadeDown.less | 0 .../animations/fading/fadeDownBig.less | 0 .../animations/fading/fadeLeft.less | 0 .../animations/fading/fadeLeftBig.less | 0 .../animations/fading/fadeRight.less | 0 .../animations/fading/fadeRightBig.less | 0 src/{ => less}/animations/fading/fadeUp.less | 0 .../animations/fading/fadeUpBig.less | 0 src/{ => less}/animations/rotating/all.less | 0 .../animations/rotating/rotate.less | 0 .../animations/rotating/rotateDownLeft.less | 0 .../animations/rotating/rotateDownRight.less | 0 .../animations/rotating/rotateUpLeft.less | 0 .../animations/rotating/rotateUpRight.less | 0 src/{ => less}/animations/sliding/all.less | 0 .../animations/sliding/slideDown.less | 0 .../animations/sliding/slideLeft.less | 0 .../animations/sliding/slideRight.less | 0 .../animations/sliding/slideUp.less | 0 src/{ => less}/animations/zooming/all.less | 0 src/{ => less}/animations/zooming/zoom.less | 0 .../animations/zooming/zoomDown.less | 0 .../animations/zooming/zoomLeft.less | 0 .../animations/zooming/zoomRight.less | 0 src/{ => less}/animations/zooming/zoomUp.less | 0 src/{ => less}/make-transitions.less | 0 src/{ => less}/vue2-animate.less | 0 src/sass/animations/bouncing/all.scss | 8 ++++ src/sass/animations/bouncing/bounce.scss | 48 +++++++++++++++++++ src/sass/animations/bouncing/bounceDown.scss | 43 +++++++++++++++++ src/sass/animations/bouncing/bounceLeft.scss | 39 +++++++++++++++ src/sass/animations/bouncing/bounceRight.scss | 39 +++++++++++++++ src/sass/animations/bouncing/bounceUp.scss | 43 +++++++++++++++++ src/sass/animations/fading/all.scss | 13 +++++ src/sass/animations/fading/fade.scss | 19 ++++++++ src/sass/animations/fading/fadeDown.scss | 22 +++++++++ src/sass/animations/fading/fadeDownBig.scss | 22 +++++++++ src/sass/animations/fading/fadeLeft.scss | 22 +++++++++ src/sass/animations/fading/fadeLeftBig.scss | 22 +++++++++ src/sass/animations/fading/fadeRight.scss | 22 +++++++++ src/sass/animations/fading/fadeRightBig.scss | 22 +++++++++ src/sass/animations/fading/fadeUp.scss | 22 +++++++++ src/sass/animations/fading/fadeUpBig.scss | 22 +++++++++ src/sass/animations/rotating/all.scss | 8 ++++ src/sass/animations/rotating/rotate.scss | 26 ++++++++++ .../animations/rotating/rotateDownLeft.scss | 26 ++++++++++ .../animations/rotating/rotateDownRight.scss | 26 ++++++++++ .../animations/rotating/rotateUpLeft.scss | 26 ++++++++++ .../animations/rotating/rotateUpRight.scss | 26 ++++++++++ src/sass/animations/sliding/all.scss | 7 +++ src/sass/animations/sliding/slideDown.scss | 21 ++++++++ src/sass/animations/sliding/slideLeft.scss | 21 ++++++++ src/sass/animations/sliding/slideRight.scss | 21 ++++++++ src/sass/animations/sliding/slideUp.scss | 21 ++++++++ src/sass/animations/zooming/all.scss | 8 ++++ src/sass/animations/zooming/zoom.scss | 25 ++++++++++ src/sass/animations/zooming/zoomDown.scss | 28 +++++++++++ src/sass/animations/zooming/zoomLeft.scss | 26 ++++++++++ src/sass/animations/zooming/zoomRight.scss | 26 ++++++++++ src/sass/animations/zooming/zoomUp.scss | 28 +++++++++++ src/sass/make-transitions.scss | 45 +++++++++++++++++ src/sass/vue2-animate.scss | 20 ++++++++ 74 files changed, 886 insertions(+), 9 deletions(-) rename src/{ => less}/animations/bouncing/all.less (100%) rename src/{ => less}/animations/bouncing/bounce.less (100%) rename src/{ => less}/animations/bouncing/bounceDown.less (100%) rename src/{ => less}/animations/bouncing/bounceLeft.less (100%) rename src/{ => less}/animations/bouncing/bounceRight.less (100%) rename src/{ => less}/animations/bouncing/bounceUp.less (100%) rename src/{ => less}/animations/fading/all.less (100%) rename src/{ => less}/animations/fading/fade.less (100%) rename src/{ => less}/animations/fading/fadeDown.less (100%) rename src/{ => less}/animations/fading/fadeDownBig.less (100%) rename src/{ => less}/animations/fading/fadeLeft.less (100%) rename src/{ => less}/animations/fading/fadeLeftBig.less (100%) rename src/{ => less}/animations/fading/fadeRight.less (100%) rename src/{ => less}/animations/fading/fadeRightBig.less (100%) rename src/{ => less}/animations/fading/fadeUp.less (100%) rename src/{ => less}/animations/fading/fadeUpBig.less (100%) rename src/{ => less}/animations/rotating/all.less (100%) rename src/{ => less}/animations/rotating/rotate.less (100%) rename src/{ => less}/animations/rotating/rotateDownLeft.less (100%) rename src/{ => less}/animations/rotating/rotateDownRight.less (100%) rename src/{ => less}/animations/rotating/rotateUpLeft.less (100%) rename src/{ => less}/animations/rotating/rotateUpRight.less (100%) rename src/{ => less}/animations/sliding/all.less (100%) rename src/{ => less}/animations/sliding/slideDown.less (100%) rename src/{ => less}/animations/sliding/slideLeft.less (100%) rename src/{ => less}/animations/sliding/slideRight.less (100%) rename src/{ => less}/animations/sliding/slideUp.less (100%) rename src/{ => less}/animations/zooming/all.less (100%) rename src/{ => less}/animations/zooming/zoom.less (100%) rename src/{ => less}/animations/zooming/zoomDown.less (100%) rename src/{ => less}/animations/zooming/zoomLeft.less (100%) rename src/{ => less}/animations/zooming/zoomRight.less (100%) rename src/{ => less}/animations/zooming/zoomUp.less (100%) rename src/{ => less}/make-transitions.less (100%) rename src/{ => less}/vue2-animate.less (100%) create mode 100644 src/sass/animations/bouncing/all.scss create mode 100644 src/sass/animations/bouncing/bounce.scss create mode 100644 src/sass/animations/bouncing/bounceDown.scss create mode 100644 src/sass/animations/bouncing/bounceLeft.scss create mode 100644 src/sass/animations/bouncing/bounceRight.scss create mode 100644 src/sass/animations/bouncing/bounceUp.scss create mode 100644 src/sass/animations/fading/all.scss create mode 100644 src/sass/animations/fading/fade.scss create mode 100644 src/sass/animations/fading/fadeDown.scss create mode 100644 src/sass/animations/fading/fadeDownBig.scss create mode 100644 src/sass/animations/fading/fadeLeft.scss create mode 100644 src/sass/animations/fading/fadeLeftBig.scss create mode 100644 src/sass/animations/fading/fadeRight.scss create mode 100644 src/sass/animations/fading/fadeRightBig.scss create mode 100644 src/sass/animations/fading/fadeUp.scss create mode 100644 src/sass/animations/fading/fadeUpBig.scss create mode 100644 src/sass/animations/rotating/all.scss create mode 100644 src/sass/animations/rotating/rotate.scss create mode 100644 src/sass/animations/rotating/rotateDownLeft.scss create mode 100644 src/sass/animations/rotating/rotateDownRight.scss create mode 100644 src/sass/animations/rotating/rotateUpLeft.scss create mode 100644 src/sass/animations/rotating/rotateUpRight.scss create mode 100644 src/sass/animations/sliding/all.scss create mode 100644 src/sass/animations/sliding/slideDown.scss create mode 100644 src/sass/animations/sliding/slideLeft.scss create mode 100644 src/sass/animations/sliding/slideRight.scss create mode 100644 src/sass/animations/sliding/slideUp.scss create mode 100644 src/sass/animations/zooming/all.scss create mode 100644 src/sass/animations/zooming/zoom.scss create mode 100644 src/sass/animations/zooming/zoomDown.scss create mode 100644 src/sass/animations/zooming/zoomLeft.scss create mode 100644 src/sass/animations/zooming/zoomRight.scss create mode 100644 src/sass/animations/zooming/zoomUp.scss create mode 100644 src/sass/make-transitions.scss create mode 100644 src/sass/vue2-animate.scss diff --git a/README.md b/README.md index 1ec6a87..3a9196e 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,13 @@ Include the stylesheet: ``` #### Less ```less - @import "/src/vue2-animate.less"; + @import "/src/less/vue2-animate.less"; + ``` + +#### Sass/Scss + ```scss + $animationDuration: 0.5s; // specify animation duration. Default value: 1s + @import "/src/sass/vue2-animate.scss"; ``` #### Building @@ -36,8 +42,9 @@ Include the stylesheet: 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 diff --git a/dist/vue2-animate.css b/dist/vue2-animate.css index 94a7d56..f8aff33 100644 --- a/dist/vue2-animate.css +++ b/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 diff --git a/dist/vue2-animate.min.css b/dist/vue2-animate.min.css index 05f0a9e..fa21ad6 100644 --- a/dist/vue2-animate.min.css +++ b/dist/vue2-animate.min.css @@ -1,5 +1,5 @@ @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 diff --git a/package.json b/package.json index 0f07748..7ee96b3 100644 --- a/package.json +++ b/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" } } diff --git a/src/animations/bouncing/all.less b/src/less/animations/bouncing/all.less similarity index 100% rename from src/animations/bouncing/all.less rename to src/less/animations/bouncing/all.less diff --git a/src/animations/bouncing/bounce.less b/src/less/animations/bouncing/bounce.less similarity index 100% rename from src/animations/bouncing/bounce.less rename to src/less/animations/bouncing/bounce.less diff --git a/src/animations/bouncing/bounceDown.less b/src/less/animations/bouncing/bounceDown.less similarity index 100% rename from src/animations/bouncing/bounceDown.less rename to src/less/animations/bouncing/bounceDown.less diff --git a/src/animations/bouncing/bounceLeft.less b/src/less/animations/bouncing/bounceLeft.less similarity index 100% rename from src/animations/bouncing/bounceLeft.less rename to src/less/animations/bouncing/bounceLeft.less diff --git a/src/animations/bouncing/bounceRight.less b/src/less/animations/bouncing/bounceRight.less similarity index 100% rename from src/animations/bouncing/bounceRight.less rename to src/less/animations/bouncing/bounceRight.less diff --git a/src/animations/bouncing/bounceUp.less b/src/less/animations/bouncing/bounceUp.less similarity index 100% rename from src/animations/bouncing/bounceUp.less rename to src/less/animations/bouncing/bounceUp.less diff --git a/src/animations/fading/all.less b/src/less/animations/fading/all.less similarity index 100% rename from src/animations/fading/all.less rename to src/less/animations/fading/all.less diff --git a/src/animations/fading/fade.less b/src/less/animations/fading/fade.less similarity index 100% rename from src/animations/fading/fade.less rename to src/less/animations/fading/fade.less diff --git a/src/animations/fading/fadeDown.less b/src/less/animations/fading/fadeDown.less similarity index 100% rename from src/animations/fading/fadeDown.less rename to src/less/animations/fading/fadeDown.less diff --git a/src/animations/fading/fadeDownBig.less b/src/less/animations/fading/fadeDownBig.less similarity index 100% rename from src/animations/fading/fadeDownBig.less rename to src/less/animations/fading/fadeDownBig.less diff --git a/src/animations/fading/fadeLeft.less b/src/less/animations/fading/fadeLeft.less similarity index 100% rename from src/animations/fading/fadeLeft.less rename to src/less/animations/fading/fadeLeft.less diff --git a/src/animations/fading/fadeLeftBig.less b/src/less/animations/fading/fadeLeftBig.less similarity index 100% rename from src/animations/fading/fadeLeftBig.less rename to src/less/animations/fading/fadeLeftBig.less diff --git a/src/animations/fading/fadeRight.less b/src/less/animations/fading/fadeRight.less similarity index 100% rename from src/animations/fading/fadeRight.less rename to src/less/animations/fading/fadeRight.less diff --git a/src/animations/fading/fadeRightBig.less b/src/less/animations/fading/fadeRightBig.less similarity index 100% rename from src/animations/fading/fadeRightBig.less rename to src/less/animations/fading/fadeRightBig.less diff --git a/src/animations/fading/fadeUp.less b/src/less/animations/fading/fadeUp.less similarity index 100% rename from src/animations/fading/fadeUp.less rename to src/less/animations/fading/fadeUp.less diff --git a/src/animations/fading/fadeUpBig.less b/src/less/animations/fading/fadeUpBig.less similarity index 100% rename from src/animations/fading/fadeUpBig.less rename to src/less/animations/fading/fadeUpBig.less diff --git a/src/animations/rotating/all.less b/src/less/animations/rotating/all.less similarity index 100% rename from src/animations/rotating/all.less rename to src/less/animations/rotating/all.less diff --git a/src/animations/rotating/rotate.less b/src/less/animations/rotating/rotate.less similarity index 100% rename from src/animations/rotating/rotate.less rename to src/less/animations/rotating/rotate.less diff --git a/src/animations/rotating/rotateDownLeft.less b/src/less/animations/rotating/rotateDownLeft.less similarity index 100% rename from src/animations/rotating/rotateDownLeft.less rename to src/less/animations/rotating/rotateDownLeft.less diff --git a/src/animations/rotating/rotateDownRight.less b/src/less/animations/rotating/rotateDownRight.less similarity index 100% rename from src/animations/rotating/rotateDownRight.less rename to src/less/animations/rotating/rotateDownRight.less diff --git a/src/animations/rotating/rotateUpLeft.less b/src/less/animations/rotating/rotateUpLeft.less similarity index 100% rename from src/animations/rotating/rotateUpLeft.less rename to src/less/animations/rotating/rotateUpLeft.less diff --git a/src/animations/rotating/rotateUpRight.less b/src/less/animations/rotating/rotateUpRight.less similarity index 100% rename from src/animations/rotating/rotateUpRight.less rename to src/less/animations/rotating/rotateUpRight.less diff --git a/src/animations/sliding/all.less b/src/less/animations/sliding/all.less similarity index 100% rename from src/animations/sliding/all.less rename to src/less/animations/sliding/all.less diff --git a/src/animations/sliding/slideDown.less b/src/less/animations/sliding/slideDown.less similarity index 100% rename from src/animations/sliding/slideDown.less rename to src/less/animations/sliding/slideDown.less diff --git a/src/animations/sliding/slideLeft.less b/src/less/animations/sliding/slideLeft.less similarity index 100% rename from src/animations/sliding/slideLeft.less rename to src/less/animations/sliding/slideLeft.less diff --git a/src/animations/sliding/slideRight.less b/src/less/animations/sliding/slideRight.less similarity index 100% rename from src/animations/sliding/slideRight.less rename to src/less/animations/sliding/slideRight.less diff --git a/src/animations/sliding/slideUp.less b/src/less/animations/sliding/slideUp.less similarity index 100% rename from src/animations/sliding/slideUp.less rename to src/less/animations/sliding/slideUp.less diff --git a/src/animations/zooming/all.less b/src/less/animations/zooming/all.less similarity index 100% rename from src/animations/zooming/all.less rename to src/less/animations/zooming/all.less diff --git a/src/animations/zooming/zoom.less b/src/less/animations/zooming/zoom.less similarity index 100% rename from src/animations/zooming/zoom.less rename to src/less/animations/zooming/zoom.less diff --git a/src/animations/zooming/zoomDown.less b/src/less/animations/zooming/zoomDown.less similarity index 100% rename from src/animations/zooming/zoomDown.less rename to src/less/animations/zooming/zoomDown.less diff --git a/src/animations/zooming/zoomLeft.less b/src/less/animations/zooming/zoomLeft.less similarity index 100% rename from src/animations/zooming/zoomLeft.less rename to src/less/animations/zooming/zoomLeft.less diff --git a/src/animations/zooming/zoomRight.less b/src/less/animations/zooming/zoomRight.less similarity index 100% rename from src/animations/zooming/zoomRight.less rename to src/less/animations/zooming/zoomRight.less diff --git a/src/animations/zooming/zoomUp.less b/src/less/animations/zooming/zoomUp.less similarity index 100% rename from src/animations/zooming/zoomUp.less rename to src/less/animations/zooming/zoomUp.less diff --git a/src/make-transitions.less b/src/less/make-transitions.less similarity index 100% rename from src/make-transitions.less rename to src/less/make-transitions.less diff --git a/src/vue2-animate.less b/src/less/vue2-animate.less similarity index 100% rename from src/vue2-animate.less rename to src/less/vue2-animate.less diff --git a/src/sass/animations/bouncing/all.scss b/src/sass/animations/bouncing/all.scss new file mode 100644 index 0000000..42fa172 --- /dev/null +++ b/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); diff --git a/src/sass/animations/bouncing/bounce.scss b/src/sass/animations/bouncing/bounce.scss new file mode 100644 index 0000000..0fbbccc --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/sass/animations/bouncing/bounceDown.scss b/src/sass/animations/bouncing/bounceDown.scss new file mode 100644 index 0000000..e854162 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/sass/animations/bouncing/bounceLeft.scss b/src/sass/animations/bouncing/bounceLeft.scss new file mode 100644 index 0000000..ca1b8f3 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/sass/animations/bouncing/bounceRight.scss b/src/sass/animations/bouncing/bounceRight.scss new file mode 100644 index 0000000..3e21692 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/sass/animations/bouncing/bounceUp.scss b/src/sass/animations/bouncing/bounceUp.scss new file mode 100644 index 0000000..f6c8c09 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/all.scss b/src/sass/animations/fading/all.scss new file mode 100644 index 0000000..993e73a --- /dev/null +++ b/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); diff --git a/src/sass/animations/fading/fade.scss b/src/sass/animations/fading/fade.scss new file mode 100644 index 0000000..f6ba3ab --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/fadeDown.scss b/src/sass/animations/fading/fadeDown.scss new file mode 100644 index 0000000..2620282 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/fadeDownBig.scss b/src/sass/animations/fading/fadeDownBig.scss new file mode 100644 index 0000000..7dbcee4 --- /dev/null +++ b/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); + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/fadeLeft.scss b/src/sass/animations/fading/fadeLeft.scss new file mode 100644 index 0000000..7ecb526 --- /dev/null +++ b/src/sass/animations/fading/fadeLeft.scss @@ -0,0 +1,22 @@ +@keyframes fadeInLeft { + from { + opacity: 0; + transform: translate3d(-100%, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeOutLeft { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(-100%, 0, 0); + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/fadeLeftBig.scss b/src/sass/animations/fading/fadeLeftBig.scss new file mode 100644 index 0000000..f196e75 --- /dev/null +++ b/src/sass/animations/fading/fadeLeftBig.scss @@ -0,0 +1,22 @@ +@keyframes fadeInLeftBig { + from { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeOutLeftBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(-2000px, 0, 0); + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/fadeRight.scss b/src/sass/animations/fading/fadeRight.scss new file mode 100644 index 0000000..da2dbf2 --- /dev/null +++ b/src/sass/animations/fading/fadeRight.scss @@ -0,0 +1,22 @@ +@keyframes fadeInRight { + from { + opacity: 0; + transform: translate3d(100%, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeOutRight { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(100%, 0, 0); + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/fadeRightBig.scss b/src/sass/animations/fading/fadeRightBig.scss new file mode 100644 index 0000000..27d7e6a --- /dev/null +++ b/src/sass/animations/fading/fadeRightBig.scss @@ -0,0 +1,22 @@ +@keyframes fadeInRightBig { + from { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeOutRightBig { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(2000px, 0, 0); + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/fadeUp.scss b/src/sass/animations/fading/fadeUp.scss new file mode 100644 index 0000000..3bd121a --- /dev/null +++ b/src/sass/animations/fading/fadeUp.scss @@ -0,0 +1,22 @@ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translate3d(0, 100%, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, -100%, 0); + } +} \ No newline at end of file diff --git a/src/sass/animations/fading/fadeUpBig.scss b/src/sass/animations/fading/fadeUpBig.scss new file mode 100644 index 0000000..49bc4a2 --- /dev/null +++ b/src/sass/animations/fading/fadeUpBig.scss @@ -0,0 +1,22 @@ +@keyframes fadeInUpBig { + from { + opacity: 0; + transform: translate3d(0, 2000px, 0); + } + + to { + opacity: 1; + transform: none; + } +} + +@keyframes fadeOutUp { + from { + opacity: 1; + } + + to { + opacity: 0; + transform: translate3d(0, -100%, 0); + } +} \ No newline at end of file diff --git a/src/sass/animations/rotating/all.scss b/src/sass/animations/rotating/all.scss new file mode 100644 index 0000000..737be5a --- /dev/null +++ b/src/sass/animations/rotating/all.scss @@ -0,0 +1,8 @@ +@import 'rotate'; +@import 'rotateDownLeft'; +@import 'rotateDownRight'; +@import 'rotateUpLeft'; +@import 'rotateUpRight'; + +$rotates: DownLeft, DownRight, UpLeft, UpRight; +@include make-transitions(rotate, $rotates); diff --git a/src/sass/animations/rotating/rotate.scss b/src/sass/animations/rotating/rotate.scss new file mode 100644 index 0000000..bb146be --- /dev/null +++ b/src/sass/animations/rotating/rotate.scss @@ -0,0 +1,26 @@ +@keyframes rotateIn { + from { + transform-origin: center; + transform: rotate3d(0, 0, 1, -200deg); + opacity: 0; + } + + to { + transform-origin: center; + transform: none; + opacity: 1; + } +} + +@keyframes rotateOut { + from { + transform-origin: center; + opacity: 1; + } + + to { + transform-origin: center; + transform: rotate3d(0, 0, 1, 200deg); + opacity: 0; + } +} diff --git a/src/sass/animations/rotating/rotateDownLeft.scss b/src/sass/animations/rotating/rotateDownLeft.scss new file mode 100644 index 0000000..1b6bbe2 --- /dev/null +++ b/src/sass/animations/rotating/rotateDownLeft.scss @@ -0,0 +1,26 @@ +@keyframes rotateInDownLeft { + from { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } + + to { + transform-origin: left bottom; + transform: none; + opacity: 1; + } +} + +@keyframes rotateOutDownLeft { + from { + transform-origin: left bottom; + opacity: 1; + } + + to { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } +} diff --git a/src/sass/animations/rotating/rotateDownRight.scss b/src/sass/animations/rotating/rotateDownRight.scss new file mode 100644 index 0000000..0771d42 --- /dev/null +++ b/src/sass/animations/rotating/rotateDownRight.scss @@ -0,0 +1,26 @@ +@keyframes rotateInDownRight { + from { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + transform-origin: right bottom; + transform: none; + opacity: 1; + } +} + +@keyframes rotateOutDownRight { + from { + transform-origin: right bottom; + opacity: 1; + } + + to { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} diff --git a/src/sass/animations/rotating/rotateUpLeft.scss b/src/sass/animations/rotating/rotateUpLeft.scss new file mode 100644 index 0000000..3ba1eb5 --- /dev/null +++ b/src/sass/animations/rotating/rotateUpLeft.scss @@ -0,0 +1,26 @@ +@keyframes rotateInUpLeft { + from { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, 45deg); + opacity: 0; + } + + to { + transform-origin: left bottom; + transform: none; + opacity: 1; + } +} + +@keyframes rotateOutUpLeft { + from { + transform-origin: left bottom; + opacity: 1; + } + + to { + transform-origin: left bottom; + transform: rotate3d(0, 0, 1, -45deg); + opacity: 0; + } +} diff --git a/src/sass/animations/rotating/rotateUpRight.scss b/src/sass/animations/rotating/rotateUpRight.scss new file mode 100644 index 0000000..1156e33 --- /dev/null +++ b/src/sass/animations/rotating/rotateUpRight.scss @@ -0,0 +1,26 @@ +@keyframes rotateInUpRight { + from { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, -90deg); + opacity: 0; + } + + to { + transform-origin: right bottom; + transform: none; + opacity: 1; + } +} + +@keyframes rotateOutUpRight { + from { + transform-origin: right bottom; + opacity: 1; + } + + to { + transform-origin: right bottom; + transform: rotate3d(0, 0, 1, 90deg); + opacity: 0; + } +} diff --git a/src/sass/animations/sliding/all.scss b/src/sass/animations/sliding/all.scss new file mode 100644 index 0000000..7a1c4fc --- /dev/null +++ b/src/sass/animations/sliding/all.scss @@ -0,0 +1,7 @@ +@import 'slideDown'; +@import 'slideLeft'; +@import 'slideRight'; +@import 'slideUp'; + +$slides: Down, Left, Right, Up; +@include make-transitions(slide, $slides); diff --git a/src/sass/animations/sliding/slideDown.scss b/src/sass/animations/sliding/slideDown.scss new file mode 100644 index 0000000..85b6221 --- /dev/null +++ b/src/sass/animations/sliding/slideDown.scss @@ -0,0 +1,21 @@ +@keyframes slideInDown { + from { + transform: translate3d(0, -100%, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideOutDown { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, 100%, 0); + } +} diff --git a/src/sass/animations/sliding/slideLeft.scss b/src/sass/animations/sliding/slideLeft.scss new file mode 100644 index 0000000..221f285 --- /dev/null +++ b/src/sass/animations/sliding/slideLeft.scss @@ -0,0 +1,21 @@ +@keyframes slideInLeft { + from { + transform: translate3d(-100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideOutLeft { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(-100%, 0, 0); + } +} diff --git a/src/sass/animations/sliding/slideRight.scss b/src/sass/animations/sliding/slideRight.scss new file mode 100644 index 0000000..d20a1b4 --- /dev/null +++ b/src/sass/animations/sliding/slideRight.scss @@ -0,0 +1,21 @@ +@keyframes slideInRight { + from { + transform: translate3d(100%, 0, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideOutRight { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(100%, 0, 0); + } +} diff --git a/src/sass/animations/sliding/slideUp.scss b/src/sass/animations/sliding/slideUp.scss new file mode 100644 index 0000000..7352209 --- /dev/null +++ b/src/sass/animations/sliding/slideUp.scss @@ -0,0 +1,21 @@ +@keyframes slideInUp { + from { + transform: translate3d(0, 100%, 0); + visibility: visible; + } + + to { + transform: translate3d(0, 0, 0); + } +} + +@keyframes slideOutUp { + from { + transform: translate3d(0, 0, 0); + } + + to { + visibility: hidden; + transform: translate3d(0, -100%, 0); + } +} diff --git a/src/sass/animations/zooming/all.scss b/src/sass/animations/zooming/all.scss new file mode 100644 index 0000000..69b6869 --- /dev/null +++ b/src/sass/animations/zooming/all.scss @@ -0,0 +1,8 @@ +@import 'zoom'; +@import 'zoomDown'; +@import 'zoomLeft'; +@import 'zoomRight'; +@import 'zoomUp'; + +$zooms: Down, Left, Right, Up; +@include make-transitions(zoom, $zooms); diff --git a/src/sass/animations/zooming/zoom.scss b/src/sass/animations/zooming/zoom.scss new file mode 100644 index 0000000..fb02965 --- /dev/null +++ b/src/sass/animations/zooming/zoom.scss @@ -0,0 +1,25 @@ +@keyframes zoomIn { + from { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + + 50% { + opacity: 1; + } +} + +@keyframes zoomOut { + from { + opacity: 1; + } + + 50% { + opacity: 0; + transform: scale3d(.3, .3, .3); + } + + to { + opacity: 0; + } +} diff --git a/src/sass/animations/zooming/zoomDown.scss b/src/sass/animations/zooming/zoomDown.scss new file mode 100644 index 0000000..0b20180 --- /dev/null +++ b/src/sass/animations/zooming/zoomDown.scss @@ -0,0 +1,28 @@ +@keyframes zoomInDown { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomOutDown { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + to { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} diff --git a/src/sass/animations/zooming/zoomLeft.scss b/src/sass/animations/zooming/zoomLeft.scss new file mode 100644 index 0000000..e82a66e --- /dev/null +++ b/src/sass/animations/zooming/zoomLeft.scss @@ -0,0 +1,26 @@ +@keyframes zoomInLeft { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomOutLeft { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0); + } + + to { + opacity: 0; + transform: scale(.1) translate3d(-2000px, 0, 0); + transform-origin: left center; + } +} diff --git a/src/sass/animations/zooming/zoomRight.scss b/src/sass/animations/zooming/zoomRight.scss new file mode 100644 index 0000000..2ce66a0 --- /dev/null +++ b/src/sass/animations/zooming/zoomRight.scss @@ -0,0 +1,26 @@ +@keyframes zoomInRight { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomOutRight { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0); + } + + to { + opacity: 0; + transform: scale(.1) translate3d(2000px, 0, 0); + transform-origin: right center; + } +} diff --git a/src/sass/animations/zooming/zoomUp.scss b/src/sass/animations/zooming/zoomUp.scss new file mode 100644 index 0000000..c45a9da --- /dev/null +++ b/src/sass/animations/zooming/zoomUp.scss @@ -0,0 +1,28 @@ +@keyframes zoomInUp { + from { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + 60% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0); + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} + +@keyframes zoomOutUp { + 40% { + opacity: 1; + transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0); + animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190); + } + + to { + opacity: 0; + transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0); + transform-origin: center bottom; + animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1); + } +} diff --git a/src/sass/make-transitions.scss b/src/sass/make-transitions.scss new file mode 100644 index 0000000..b95c36e --- /dev/null +++ b/src/sass/make-transitions.scss @@ -0,0 +1,45 @@ +@mixin make-transitions($base, $names) { + + // We'll make a single rule for all transitions that + // sets the animation duration. This is basically the + // stock 'animate' class from Animate.css. + // $classesJoin: replace('${names}', ', ', '-enter-active, .${base}', g); + + //.${base}-enter-active, .${base}-leave-active, + //.${base}${classesJoin}-leave-active { + // animation-duration: $animationDuration; + // animation-fill-mode: both; + //} + + .#{$base}-enter-active, .#{$base}In, + .#{$base}-leave-active, .#{$base}Out { + animation-duration: $animationDuration; + animation-fill-mode: both; + } + + // Entrance/Exit for the base class + .#{$base}-enter-active, .#{$base}In { + animation-name: '#{$base}In'; + } + + .#{$base}-leave-active, .#{$base}Out { + animation-name: '#{$base}Out'; + } + + // Loop through the different animations, and set + // the enter/leave animation names for each class. + @each $name in $names { + .#{$base}#{$name}-enter-active, .#{$base}In#{$name}, + .#{$base}#{$name}-leave-active, .#{$base}Out#{$name} { + animation-duration: $animationDuration; + animation-fill-mode: both; + } + + .#{$base}#{$name}-enter-active, .#{$base}In#{$name} { + animation-name: '#{$base}In#{$name}'; + } + .#{$base}#{$name}-leave-active, .#{$base}Out#{$name} { + animation-name: '#{$base}Out#{$name}'; + } + } +} \ No newline at end of file diff --git a/src/sass/vue2-animate.scss b/src/sass/vue2-animate.scss new file mode 100644 index 0000000..04845c8 --- /dev/null +++ b/src/sass/vue2-animate.scss @@ -0,0 +1,20 @@ +@charset "UTF-8"; + +/*! + * vue2-animate v1.0.5 + * (c) 2018 Pavel Savushkin + * Released under the MIT License. + * Documentation: https://github.com/asika32764/vue2-animate + */ + +$animationDuration: 1s !default; + +// Main mixin +@import "make-transitions"; + +// Our animations +@import "./animations/bouncing/all"; +@import "./animations/fading/all"; +@import "./animations/rotating/all"; +@import "./animations/sliding/all"; +@import "./animations/zooming/all";